添加计时器
可以使用 add() 方法或 sync() 方法将计时器添加到时间轴。
定时器创建
使用 add() 方法直接创建并将计时器添加到时间线上。
timeline.add(parameters, position);参数
| 名称 | 接受 |
|---|---|
| parameters | 一个Object，用于 计时器播放设置 和 计时器回调 |
| position (opt) | Time position |
计时器同步
使用 sync() 方法同步现有的计时器。
timeline.sync(timer, position);参数
| 名称 | 接受 |
|---|---|
| timer | Timer |
| position (opt) | Time 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>