Appearance
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 }