缓动

定义所有动画属性或特定属性的缓动函数。
缓动函数控制属性值随时间变化的速率，决定动画在播放过程中不同时间点的速度。

所有 Anime.js 内置缓动函数都可以通过传入缓动名称 String 或通过 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()`	步数 = `10`
`'cubicBezier'` `'cubicBezier(.5,0,.5,1)'`	`cubicBezier()`	x1 = `.5`, y1 = `0`, x2 = `.5`, y2 = `1`
`'in'` `'in(1.675)'`	`in()`	幂 = `1.675`
`'out'` `'out(1.675)'`	`out()`	幂 = `1.675`
`'inOut'` `'inOut(1.675)'`	`inOut()`	幂 = `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()`	过冲 = `1.70158`
`'outBack'` JS `'outBack(1.70158) '` JS	`outBack()`	过冲 = `1.70158`
`'inOutBack'` JS `'inOutBack(1.70158) '` JS	`inOutBack()`	过冲 = `1.70158`
`'inElastic'` JS `'inElastic(1, .3) '` JS	`inElastic()`	振幅 = `1`, 周期 = `.3`
`'outElastic'` JS `'outElastic(1, .3) '` JS	`outElastic()`	振幅 = `1`, 周期 = `.3`
`'inOutElastic'` JS `'inOutElastic(1, .3) '` JS	`inOutElastic()`	振幅 = `1`, 周期 = `.3`
-	`createSpring()`	`{ 质量: 1, 刚度: 100, 阻尼: 10, 速度: 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>