时间位置
指定时间线子项插入到时间线中的时间。
如果未定义位置，子项将放置在时间线的末尾。
时间位置定义为以下方法的最后一个参数
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 毫秒处 |
| 标签 | 'My Label' |
将元素定位在 'My Label' 元素处 |
| 错峰 | 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>