时间位置

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

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

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

时间定位类型

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