内置缓动
无论是 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 = 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' |
| 返回 | overshoot = 1.70158 |
'inBack', 'outBack', 'inOutBack', 'outInBack' |
| 弹性 | 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>