同步 WAAPI 动画
可以使用 sync() 方法将 WAAPI 动画同步到时间线。
timeline.sync(animation, position);参数
| 名称 | 接受 |
|---|---|
| synced | Animation | Timer | Timeline |
| position (opt) | Time position |
返回
时间线本身
可以与其他时间线方法链式调用。
同步 WAAPI 动画代码示例
import { createTimeline, waapi } from 'animejs';
const circle = waapi.animate('.circle', {
x: '15rem',
});
const triangle = waapi.animate('.triangle', {
x: '15rem',
y: [0, '-1.5rem', 0],
ease: 'out(4)',
duration: 750,
});
const square = waapi.animate('.square', {
x: '15rem',
rotateZ: 360,
});
const tl = createTimeline()
.sync(circle, 0)
.sync(triangle, 350)
.sync(square, 250);<div class="large row">
<div class="medium pyramid">
<div class="triangle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
</div>