Skip to content

Easing

React Motion 支持两种方式指定缓动(easing):

  • 字符串名称:使用内置 easing,例如 "quadOut""bounceOut"
  • 自定义函数:传入 EasingFn,也就是 (t: number) => number

EasingFn

缓动函数签名:

  • t:归一化进度(0~1)
  • 返回:缓动后的进度(0~1)

EasingName

内置缓动预设名称(字符串)。命名规则:

  • xxxIn:开始慢、后面快(加速)
  • xxxOut:开始快、后面慢(减速)
  • xxxInOut:前半段加速、后半段减速

在关键帧中使用

ts
{ value: { textContent: '你好' }, duration: 400, ease: "quadOut" }

或:

ts
 const ease = (t: number) => t * t;
{ value: { textContent: '你好' }, duration: 400, ease }

缓动效果可视化对比

神岛实验室