值交错
所有补间动画的可动画属性均支持基于函数的值,从而能够在多目标动画中使用 stagger() 方法返回的交错(stagger)函数。
这使得每个目标都拥有一个交错值,该值会随后续每个目标按设定的数值递增。
交错值代码示例
import { animate, stagger } from 'animejs';
const animation = animate('.square', {
y: stagger(['-2.75rem', '2.75rem']),
rotate: { from: stagger('-.125turn') },
loop: true,
alternate: true
});
<div class="small justified row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>