时间轴位置交错 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>