sync()
将 JS 动画、WAAPI 动画、计时器、时间轴，甚至本地 WAAPI 动画同步到时间轴。
const tlChild = createTimeline().add(target, { x: 100 }).add(target, { y: 100 });
createTimeline().sync(tlChild);当时间轴被创建时，会处理补间值的组合，并且在添加时不会影响时间轴现有的子元素。
参数
| 名称 | 接受 |
|---|---|
| synced | JSAnimation | Timer | Timeline | Anime.js WAAPIAnimation | WAAPIAnimation |
| position (opt) | Time position |
返回
时间线本身
可以与其他时间线方法链式调用。
sync() 代码示例
import { createTimeline, animate, waapi } from 'animejs';
const circleAnimation = waapi.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>