时间线位置错开

时间线的 add() 位置参数接受基于函数的值，从而在定位多目标动画时可以使用 stagger() 方法返回的 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>