内置缓动
js 和 waapi 的 animate() 函数均包含一系列内置的缓动函数，可以直接通过名称在 ease 参数中指定
animate(target, { x: 100, ease: 'outQuad' });
animate(target, { x: 100, ease: 'outExpo' });
animate(target, { x: 100, ease: 'outElastic(.8, 1.2)' });所有内置缓动函数也可以通过导入的 eases 对象来访问
import { eases } from 'animejs';
eases.outQuad;
eases.outExpo;
eases.outElastic(.8, 1.2);内置缓动函数列表
| 类型 | 参数 | 变体（点击链接可在编辑器中打开） |
|---|---|---|
| 线性 | -- | 'linear' |
| 幂函数 (Power) | 幂指数 (power) = 1.675 |
'in', 'out', 'inOut', 'outIn' |
| 二次方 (Quad) | -- | 'inQuad', 'outQuad', 'inOutQuad', 'outInQuad' |
| 三次方 (Cubic) | -- | 'inCubic', 'outCubic', 'inOutCubic', 'outInCubic' |
| 四次方 (Quart) | -- | 'inQuart', 'outQuart', 'inOutQuart', 'outInQuart' |
| 五次方 (Quint) | -- | 'inQuint', 'outQuint', 'inOutQuint', 'outInQuint' |
| 正弦 (Sine) | -- | 'inSine', 'outSine', 'inOutSine', 'outInSine' |
| 指数 (Exponential) | -- | 'inExpo', 'outExpo', 'inOutExpo', 'outInExpo' |
| 圆形 (Circular) | -- | 'inCirc', 'outCirc', 'inOutCirc', 'outInCirc' |
| 回弹 (Bounce) | -- | 'inBounce', 'outBounce', 'inOutBounce', 'outInBounce' |
| 回溯 (Back) | 超出量 (overshoot) = 1.70158 |
'inBack', 'outBack', 'inOutBack', 'outInBack' |
| 弹性 (Elastic) | 振幅 (amplitude) = 1,周期 (period) = .3 |
'inElastic', 'outElastic', 'inOutElastic', 'outInElastic' |
内置缓动代码示例
import { animate, waapi } from 'animejs';
animate('.row:nth-child(1) .square', {
x: '17rem',
rotate: 360,
ease: 'inOut',
});
animate('.row:nth-child(2) .square', {
x: '17rem',
rotate: 360,
ease: 'inOut(3)',
});
waapi.animate('.row:nth-child(3) .square', {
x: '17rem',
rotate: 360,
ease: 'inOutExpo',
});<div class="medium row">
<div class="square"></div>
<div class="padded label">'inOut'</div>
</div>
<div class="medium row">
<div class="square"></div>
<div class="padded label">'inOut(3)'</div>
</div>
<div class="medium row">
<div class="square"></div>
<div class="padded label">'inOutExpo'</div>
</div>