add()
创建并向时间轴添加动画和计时器。
添加到时间轴的元素类型取决于传递给add()的参数。
添加动画
timeline.add(targets, parameters, position);| 参数 | 接受 |
|---|---|
| targets | Targets |
| parameters | Animatable properties & Tween parameters & Animation playback settings & Animation callbacks |
| position (opt) | Time position |
添加计时器
timeline.add(timerParameters, position);| 参数 | 类型 |
|---|---|
| timerParameters | Timer playback settings & Timer callbacks |
| position (opt) | Time position |
返回
时间线本身
可以与其他时间线方法链式调用。
add() 代码示例
import { createTimeline, utils } from 'animejs';
const [ $value ] = utils.$('.value');
const tl = createTimeline()
// Add labels
.label('start timer 1', 0)
.label('animate circle', 1000)
.label('start timer 2', 2000)
// Add Timer
.add({
duration: 1000,
onUpdate: self => $value.innerHTML = self.currentTime,
}, 'start timer 1')
// Add Animation
.add('.circle', {
duration: 2000,
x: '16rem',
}, 'animate circle')
// Add Timer
.add({
duration: 1000,
onUpdate: self => $value.innerHTML = self.currentTime,
}, 'start timer 2');<div class="large row">
<div class="circle"></div>
<pre class="large log row">
<span class="label">value</span>
<span class="value lcd">0</span>
</pre>
</div>