worklet.Easing

worklet.Easing

相关文档: worklet 动画

Easing 模块实现了常见的动画缓动函数（动画效果参考 https://easings.net/ ），可从 wx.worklet 对象中读取。

示例代码

在开发者工具中预览效果

预置动画函数

• Easing.bounce 反弹动画
• Easing.ease 惯性动画
• Easing.elastic 弹性动画

标准缓动函数

• Easing.linear 线性
• Easing.quad 二次方
• Easing.cubic 三次方
• Easing.poly 实现其它幂函数

其它数学函数

• Easing.bezier 三次贝塞尔曲线
• Easing.circle 圆形曲线
• Easing.sin 正弦函数
• Easing.exp 指数函数

缓动方式

以上效果均有三种缓动方式

• Easing.in 正向执行缓动函数
• Easing.out 反向执行缓动函数
• Easing.inOut 前半程正向，后半程反向 以 sin 函数为例，其中 Easing.in(Easing.sin) 和直接使用 Easing.sin 效果相同。

1. Easing.in(Easing.sin) 动画效果参考 https://easings.net/#easeInSine
2. Easing.out(Easing.sin) 动画效果参考 https://easings.net/#easeOutSine
3. Easing.inOut(Easing.sin) 动画效果参考 https://easings.net/#easeInOutSine

Easing.bounce

简单的反弹效果，动画效果参考

Easing.bounce(t)

Easing.ease

简单的惯性动画，动画效果参考

Easing.ease(t)

Easing.elastic

简单的弹性动画，类似弹簧来回摆动，高阶函数。默认弹性为 1，会稍微超出一次。弹性为 0 时 不会过冲。动画效果参考

Easing.elastic(bounciness = 1)

Easing.linear

线性函数，f(t) = t，动画效果参考

Easing.linear(t)

Easing.quad

二次方函数，f(t) = t * t，动画效果参考

Easing.quad(t)

Easing.cubic

立方函数，f(t) = t * t * t，动画效果参考

Easing.cubic(t)

Easing.poly

高阶函数，返回幂函数

poly(4): 动画效果参考

poly(5): 动画效果参考

Easing.poly(n)

Easing.bezier

三次贝塞尔曲线，效果同 css transition-timing-function

调试参数可借助 可视化工具

Easing.bezier(x1, y1, x2, y2)

Easing.circle

圆形曲线，动画效果参考

Easing.circle(t)

Easing.sin

正弦函数，动画效果参考

Easing.sin(t)

Easing.exp

指数函数，动画效果参考

Easing.exp(t)

Easing.in

正向运行 easing function，高阶函数。

Easing.in(easing)

Easing.out

反向运行 easing function，高阶函数。

Easing.out(easing)

Easing.inOut

前半程正向，后半程反向，高阶函数。

Easing.inOut(easing)