同步时间轴 V4
时间轴可以使用 sync() 方法与其他时间轴同步。
timelineA.sync(timelineB, position);参数
| 名称 | 接受 |
|---|---|
| 已同步 | 动画 | 定时器 | 时间轴 |
| 位置 (opt) | 时间位置 |
返回
时间轴本身
可以与其他时间轴方法链式调用。
同步时间轴代码示例
import { createTimeline, animate } from 'animejs';
const circleAnimation = animate('.circle', {
x: '15rem'
});
const tlA = createTimeline()
.sync(circleAnimation)
.add('.triangle', {
x: '15rem',
duration: 2000,
})
.add('.square', {
x: '15rem',
});
const tlB = createTimeline({ defaults: { duration: 2000 } })
.add(['.triangle', '.square'], {
rotate: 360,
}, 0)
.add('.circle', {
scale: [1, 1.5, 1],
}, 0);
const tlMain = createTimeline()
.sync(tlA)
.sync(tlB, '-=2000');<div class="large row">
<div class="medium pyramid">
<div class="triangle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
</div>