添加计时器 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>