值交错

所有可动画的补间属性都接受基于函数的值,从而能够在多目标动画中使用 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>