弹簧和自定义缓动
使用任何弹簧和自定义的 JavaScript 缓动函数。
所有 Anime.js 内置的缓动函数都可以通过传递在 eases 对象上可访问的函数来使用。
import { eases } from 'animejs';
const { linear, outExpo, cubicBezier } = eases;spring() 缓动函数必须单独导入。
import { spring } from 'animejs';内置缓动
| 内置字符串 | 函数 | 参数 |
|---|---|---|
'linear''linear(0, .5 75%, 1)' |
linear() |
coords (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>