时间轴
将动画、计时器和回调函数同步在一起。
时间线使用从主 'animejs' 模块导入的 createTimeline() 方法创建
import { createTimeline } from 'animejs';
const timeline = createTimeline(parameters);或者从 'animejs/timeline' 子路径 作为独立模块导入
import { createTimeline } from 'animejs/timeline';参数
| 名称 | 接受 |
|---|---|
| 参数 (可选) | 一个 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>
本节内容