弹性与自定义缓动

使用任意弹簧和自定义 JavaScript 缓动函数。

通过传递 eases 对象上可访问的函数，可以使用所有 Anime.js 内置的缓动函数。

import { eases } from 'animejs';

const { linear, outExpo, cubicBezier } = eases;

spring() 缓动函数必须单独导入。

import { spring } from 'animejs';

内置缓动

内置字符串	函数	参数
`'linear'` `'linear(0, .5 75%, 1)'`	`linear()`	坐标 (`0, '.5 75%', 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`

默认值

'out(2)'

弹簧与自定义缓动代码示例

import { waapi, utils, stagger, spring } from 'animejs';

waapi.animate('.circle', {
  y: [0, -30, 0],
  ease: spring({ stiffness: 150, damping: 5 }),
  delay: stagger(75),
  loop: true,
});

<div class="large row">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>