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