添加动画
动画可以通过 add()
方法或 sync()
方法添加到时间轴。
动画创建
使用 add()
方法可以直接在时间轴上创建并添加动画。
这允许对时间轴现有子项进行缓动值组合。
timeline.add(targets, parameters, position);
参数
名称 | 接受 |
---|---|
目标 | 目标 |
参数 | 一个包含 可动画属性、缓动参数、播放设置 和 动画回调 的 Object 。 |
位置 (可选) | 时间位置 |
动画同步
使用 sync()
方法同步现有动画。
缓动值组合在动画创建时处理,并且在添加时不会影响时间轴的现有子项。
const animation = animate(target, { x: 100 });
timeline.sync(animation, 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>