add() V4
创建动画和计时器并将其添加到时间轴。
添加到时间轴的元素类型取决于传递给 add() 的参数。
添加动画
timeline.add(targets, parameters, position);| 参数 | 接受 |
|---|---|
| targets | 目标 |
| parameters | 可动画属性 & Tween 参数 & 动画播放设置 & 动画回调 |
| position (可选) | 时间位置 |
添加计时器
timeline.add(timerParameters, position);| 参数 | 类型 |
|---|---|
| timerParameters | 计时器播放设置 & 计时器回调 |
| 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>