同步 WAAPI 动画 V4
WAAPI 动画可以使用 sync() 方法同步到时间线。
timeline.sync(animation, 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>