缓动 Easing

同样的 400px 位移,缓动决定「气质」。UI 入场多用 power2.out / power3.out; 强调用 back.out;玩笑感用 bounce / elastic。

命名规则

格式是 系列.in | .out | .inOut

  • .in:慢启动、快结束(离场常用)
  • .out:快启动、慢结束(入场最常用)
  • .inOut:两端都缓,中间快(来回移动)
系列写法特点
Powerpower1 ~ power4数字越大越「冲」
Sinesine.out最柔,接近物理惯性
Circ / Expocirc.out / expo.out非常陡,适合闪现
Backback.out(1.7)过冲;括号是 overshoot
Elasticelastic.out(1, 0.4)振幅、周期;别用在大段文字上
Bouncebounce.out落地弹跳
Stepssteps(5)逐帧/像素风
Linearnone匀速;跑马灯、进度条常用
点击名称对比同一段位移
EASE
自定义曲线可用 Club 插件 CustomEase;免费方案是把关键帧拆到 Timeline 里近似。 官方可视化:gsap.com/docs/v3/Eases