内置缓动
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' |
| 幂函数 | 幂 = 1.675 |
'in', 'out', 'inOut', 'outIn' |
| 二次函数 | -- | 'inQuad', 'outQuad', 'inOutQuad', 'outInQuad' |
| 三次函数 | -- | 'inCubic', 'outCubic', 'inOutCubic', 'outInCubic' |
| 四次函数 | -- | 'inQuart', 'outQuart', 'inOutQuart', 'outInQuart' |
| 五次函数 | -- | 'inQuint', 'outQuint', 'inOutQuint', 'outInQuint' |
| 正弦 | -- | 'inSine', 'outSine', 'inOutSine', 'outInSine' |
| 指数函数 | -- | 'inExpo', 'outExpo', 'inOutExpo', 'outInExpo' |
| 圆形函数 | -- | 'inCirc', 'outCirc', 'inOutCirc', 'outInCirc' |
| 弹性回弹 | -- | 'inBounce', 'outBounce', 'inOutBounce', 'outInBounce' |
| 回退 | 超出量 = 1.70158 |
'inBack', 'outBack', 'inOutBack', 'outInBack' |
| 弹性 | 振幅 = 1,周期 = .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>