添加动画

动画可以通过 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>