时间线

同步动画、计时器和回调。

时间轴是使用从主 'animejs' 模块导入的 createTimeline() 方法创建的:

import { createTimeline } from 'animejs';

const timeline = createTimeline(parameters);

或者作为独立模块从 'animejs/timeline' 子路径 导入:

import { createTimeline } from 'animejs/timeline';

参数

名称 接受
parameters (opt) 一个Object,用于 时间线播放设置时间线回调

返回

时间轴

一个 Timeline 实例公开了 方法 ,用于向其中添加动画、计时器、回调和标签。

timeline.add(target, animationParameters, position);
timeline.add(timerParameters, position);
timeline.sync(timelineB, position);
timeline.call(callbackFunction, position);
timeline.label(labelName, position);

时间线代码示例

import { createTimeline } from 'animejs';

const tl = createTimeline({ defaults: { duration: 750 } });

tl.label('start')
  .add('.square', { x: '15rem' }, 500)
  .add('.circle', { x: '15rem' }, 'start')
  .add('.triangle', { x: '15rem', rotate: '1turn' }, '<-=500');
<div class="large row">
  <div class="medium pyramid">
    <div class="triangle"></div>
    <div class="square"></div>
    <div class="circle"></div>
  </div>
</div>