时间轴位置错开 V4

时间轴 add() 方法的位置参数接受基于函数的值，这使得在定位多目标动画时，可以使用 stagger() 方法返回的错开函数。

这使得每个目标都能创建自己的动画到错开的位置，并且每个后续目标都会增加一个设定的毫秒数。

在错开动画上定义的回调也会错开，并为每个目标调用。

stagger() 参数对象的 start 属性允许定义错开的起始值，并接受与时间轴 add() 位置参数相同的值。

时间轴位置错开代码示例

import { createTimeline, stagger, utils } from 'animejs';

const tl = createTimeline();

const onComplete = ({ targets }) => {
  utils.set(targets, { color: 'var(--hex-red)' });
}

tl
.add('.circle', { x: '15rem', onComplete })
.label('circle completes')
.add(['.triangle', '.square'], {
  x: '15rem',
  onComplete, // Callbacks are aslo staggered
}, stagger(500, { start: 'circle completes-=500' }));

<div class="large row">
  <div class="medium pyramid">
    <div class="triangle"></div>
    <div class="square"></div>
    <div class="circle"></div>
  </div>
</div>