添加计时器
可以使用 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>