时间位置

指定时间轴子项被插入到时间轴中的时间。
如果未定义位置，子项将被放置在时间轴的末尾。

时间位置被定义为以下方法的最后一个参数：

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

时间位置类型

类型	示例	描述
绝对	`100`	将元素定位在时间线的正好100毫秒处
加法	`'+=100'`	在最后一个元素之后100毫秒定位该元素
减法	`'-=100'`	在最后一个元素结束前 100 毫秒定位该元素
乘数	`'*=.5'`	将元素定位在元素总时长的中间
上一个结束位置	`'<'`	将元素定位在前一个元素的末尾位置
上一次启动位置	`'<<'`	将元素定位在前一个元素的起始位置
组合的	`'<<+=250'`	在前一个元素的起始位置之后 250 毫秒放置该元素
Label	`'My Label'`	将元素定位到 `'My Label'` 元素
Stagger	`stagger(10)`	将元素位置错开 `10`

时间位置代码示例

import { createTimeline } from 'animejs';

const tl = createTimeline()
.label('start', 0)
.add('.square', {
  x: '15rem',
  duration: 500,
}, 500)
.add('.circle', {
  x: '15rem',
  duration: 500,
}, 'start')
.add('.triangle', {
  x: '15rem',
  rotate: '1turn',
  duration: 500,
}, '<-=250');

<div class="large row">
  <div class="medium pyramid">
    <div class="triangle"></div>
    <div class="square"></div>
    <div class="circle"></div>
  </div>
</div>