缓动
为所有动画属性或特定属性定义缓动函数。
缓动函数控制属性值随时间变化的速率，决定动画在播放期间不同点的速度。
所有 Anime.js 内置的缓动函数都可以通过传递缓动名称字符串或访问 eases 对象上的函数来使用。
import { eases } from 'animejs';
const { linear, outExpo, cubicBezier } = eases;createSpring() 缓动函数必须单独导入。
import { createSpring } from 'animejs';接受
| 内置字符串 | 函数 | 参数 |
|---|---|---|
'linear''linear(0, .5 75%, 1)' |
linear() |
坐标 (0, '.5 75%', 1) |
'irregular' JS'irregular(10, 1)' JS |
irregular() |
长度 = 10, 随机性 = 1 |
'steps''steps(10)' |
steps() |
steps = 10 |
'cubicBezier''cubicBezier(.5,0,.5,1)' |
cubicBezier() |
x1 = .5, y1 = 0, x2 = .5, y2 = 1 |
'in''in(1.675)' |
in() |
power = 1.675 |
'out''out(1.675)' |
out() |
power = 1.675 |
'inOut''inOut(1.675)' |
inOut() |
power = 1.675 |
'inQuad' JS |
inQuad |
- |
'outQuad' JS |
outQuad |
- |
'inOutQuad' JS |
inOutQuad |
- |
'inCubic' JS |
inCubic |
- |
'outCubic' JS |
outCubic |
- |
'inOutCubic' JS |
inOutCubic |
- |
'inQuart' JS |
inQuart |
- |
'outQuart' JS |
outQuart |
- |
'inOutQuart' JS |
inOutQuart |
- |
'inQuint' JS |
inQuint |
- |
'outQuint' JS |
outQuint |
- |
'inOutQuint' JS |
inOutQuint |
- |
'inSine' JS |
inSine |
- |
'outSine' JS |
outSine |
- |
'inOutSine' JS |
inOutSine |
- |
'inCirc' JS |
inCirc |
- |
'outCirc' JS |
outCirc |
- |
'inOutCirc' JS |
inOutCirc |
- |
'inExpo' JS |
inExpo |
- |
'outExpo' JS |
outExpo |
- |
'inOutExpo' JS |
inOutExpo |
- |
'inBounce' JS |
inBounce |
- |
'outBounce' JS |
outBounce |
- |
'inOutBounce' JS |
inOutBounce |
- |
'inBack' JS'inBack(1.70158) ' JS |
inBack() |
overshoot = 1.70158 |
'outBack' JS'outBack(1.70158) ' JS |
outBack() |
overshoot = 1.70158 |
'inOutBack' JS'inOutBack(1.70158) ' JS |
inOutBack() |
overshoot = 1.70158 |
'inElastic' JS'inElastic(1, .3) ' JS |
inElastic() |
amplitude = 1, period = .3 |
'outElastic' JS'outElastic(1, .3) ' JS |
outElastic() |
amplitude = 1, period = .3 |
'inOutElastic' JS'inOutElastic(1, .3) ' JS |
inOutElastic() |
amplitude = 1, period = .3 |
| - | createSpring() |
{ mass: 1, stiffness: 100, damping: 10, velocity: 0 } |
默认
'out(2)'
要全局更改默认值，请更新 engine.defaults 对象。
import { engine } from 'animejs';
engine.defaults.ease = 'outElastic(1, .5)'; // // v3 throwback :)缓动代码示例
import { animate, waapi, eases, createSpring } from 'animejs';
animate('.row:nth-child(1) .square', {
x: '17rem',
rotate: 360,
ease: 'inQuad',
});
animate('.row:nth-child(2) .square', {
x: '17rem',
rotate: 360,
ease: eases.outQuad,
});
waapi.animate('.row:nth-child(3) .square', {
x: '17rem',
rotate: {
to: 360,
ease: 'out(6)',
},
ease: createSpring({ stiffness: 70 }),
});<div class="medium row">
<div class="square"></div>
<div class="padded label">all: 'inQuad'</div>
</div>
<div class="medium row">
<div class="square"></div>
<div class="padded label">all: eases.outQuad</div>
</div>
<div class="medium row">
<div class="square"></div>
<div class="padded label">x: createSpring()<br>rotate: 'inQuad'</div>
</div>