时间交错
Tween 的时间相关属性(如 delay
和 duration
)接受基于函数的值,从而可以在多目标动画中使用 stagger()
方法返回的 stagger 函数。
这导致每个目标 tween 具有不同的时间,每个后续目标的 tween 时间都会增加设定的毫秒数。
时间交错代码示例
import { animate, stagger } from 'animejs';
animate('.square', {
x: '17rem',
delay: stagger(100),
duration: stagger(200, { start: 500 }),
loop: true,
alternate: true
});
<div class="small row">
<div class="square"></div>
<div class="padded label">delay: 0ms; duration: 500ms</div>
</div>
<div class="small row">
<div class="square"></div>
<div class="padded label">delay: 100ms; duration: 700ms</div>
</div>
<div class="small row">
<div class="square"></div>
<div class="padded label">delay: 200ms; duration: 900ms</div>
</div>
<div class="small row">
<div class="square"></div>
<div class="padded label">delay: 300ms; duration: 1100ms</div>
</div>