缓动 Easing
同样的 400px 位移,缓动决定「气质」。UI 入场多用 power2.out / power3.out;
强调用 back.out;玩笑感用 bounce / elastic。
命名规则
格式是 系列.in | .out | .inOut:
- .in:慢启动、快结束(离场常用)
- .out:快启动、慢结束(入场最常用)
- .inOut:两端都缓,中间快(来回移动)
| 系列 | 写法 | 特点 |
|---|---|---|
| Power | power1 ~ power4 | 数字越大越「冲」 |
| Sine | sine.out | 最柔,接近物理惯性 |
| Circ / Expo | circ.out / expo.out | 非常陡,适合闪现 |
| Back | back.out(1.7) | 过冲;括号是 overshoot |
| Elastic | elastic.out(1, 0.4) | 振幅、周期;别用在大段文字上 |
| Bounce | bounce.out | 落地弹跳 |
| Steps | steps(5) | 逐帧/像素风 |
| Linear | none | 匀速;跑马灯、进度条常用 |
点击名称对比同一段位移
EASE
自定义曲线可用 Club 插件 CustomEase;免费方案是把关键帧拆到 Timeline 里近似。
官方可视化:gsap.com/docs/v3/Eases