时间位置

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

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

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

时间位置类型

类型	示例	描述
绝对值 (Absolute)	`100`	将元素精确放置在时间轴的 100ms 处
加法 (Addition)	`'+=100'`	将元素放置在上一个元素结束后的 100ms 处
减法 (Subtraction)	`'-=100'`	将元素放置在上一个元素结束前的 100ms 处
乘法 (Multiplier)	`'*=.5'`	将元素放置在总元素持续时间的一半处
前一个结束位置 (Previous end) position	`'<'`	将元素放置在上一个元素的结束位置
前一个开始位置 (Previous start) position	`'<<'`	将元素放置在上一个元素的开始位置
组合 (Combined)	`'<<+=250'`	将元素放置在上一个元素开始位置之后的 250ms 处
标签 (Label)	`'My Label'`	将元素放置在 `'My Label'` 标签处
交错	`stagger(10)`	将元素位置交错 (stagger) `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>