时间位置

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

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

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

时间位置类型

类型	示例	描述
绝对	`500`	将元素精确放置在时间轴的 100 毫秒处
加法	`'+=100'`	将元素定位在最后一个元素之后 100 毫秒
减法	`'-=100'`	将元素定位在最后一个元素结束前 100 毫秒
乘法	`'*=.5'`	将元素定位在总元素持续时间的一半处
上一个结束点位置	`'<'`	将元素定位在上一个元素的结束位置
上一个开始点位置	`'<<'`	将元素定位在上一个元素的开始位置
组合	`'<<+=250'`	将元素定位在上一个元素开始位置之后 250 毫秒
标签	`'我的标签'`	将元素定位在 `'我的标签'` 元素处
交错	`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>