添加动画
可以使用 add() 方法或 sync() 方法将动画添加到时间轴。
动画制作
使用 add() 方法直接创建并将动画添加到时间轴。
这允许与时间轴现有的子项进行补间值组合。
timeline.add(targets, parameters, position);参数
| 名称 | 接受 |
|---|---|
| targets | Targets |
| parameters | 一个包含 可动画属性、 Tween 参数、 播放设置 和 动画回调的对象 |
| position (opt) | Time position |
动画同步
使用 sync() 方法同步现有动画。
在创建动画时处理补间值的组合，添加到时间轴时不会影响时间轴现有的子项。
const animation = animate(target, { x: 100 });
timeline.sync(animation, position);参数
| 名称 | 接受 |
|---|---|
| animation | Animation |
| position (opt) | Time position |
返回
时间线本身
可以与其他时间线方法链式调用。
添加动画代码示例
import { createTimeline, animate } from 'animejs';
const circleAnimation = animate('.circle', {
x: '15rem'
});
const tl = createTimeline()
.sync(circleAnimation)
.add('.triangle', {
x: '15rem',
rotate: '1turn',
duration: 500,
alternate: true,
loop: 2,
})
.add('.square', {
x: '15rem',
});<div class="large row">
<div class="medium pyramid">
<div class="triangle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
</div>