添加定时器 V4 版本新增
可以使用 add() 方法或 sync() 方法将定时器添加到时间轴。
定时器创建
使用 add() 方法直接创建定时器并将其添加到时间轴。
timeline.add(parameters, position);参数
| 名称 | 接受 |
|---|---|
| 参数 | 包含 定时器播放设置 和 定时器回调 的 Object |
| 位置 (可选) | 时间位置 |
定时器同步
使用 sync() 方法同步现有定时器。
timeline.sync(timer, position);参数
| 名称 | 接受 |
|---|---|
| 定时器 | 定时器 |
| 位置 (可选) | 时间位置 |
返回
时间轴本身
可以与其他时间轴方法链式调用。
添加定时器代码示例
import { createTimeline, createTimer, utils } from 'animejs';
const [ $timer01, $timer02, $timer03 ] = utils.$('.timer');
const timer1 = createTimer({
duration: 1500,
onUpdate: self => $timer01.innerHTML = self.currentTime,
});
const tl = createTimeline()
.sync(timer1)
.add({
duration: 500,
onUpdate: self => $timer02.innerHTML = self.currentTime,
})
.add({
onUpdate: self => $timer03.innerHTML = self.currentTime,
duration: 1000
});<div class="large centered row">
<div class="col">
<pre class="large log row">
<span class="label">timer 01</span>
<span class="timer value lcd">0</span>
</pre>
</div>
<div class="col">
<pre class="large log row">
<span class="label">timer 02</span>
<span class="timer value lcd">0</span>
</pre>
</div>
<div class="col">
<pre class="large log row">
<span class="label">timer 03</span>
<span class="timer value lcd">0</span>
</pre>
</div>
</div>