stretch() V4
更改时间线及其子项的总持续时间以适应特定时间。
总持续时间等于迭代持续时间乘以迭代总次数。因此，如果时间线为 1000 毫秒并循环两次（总共 3 次迭代），则总持续时间为 3000 毫秒（1000 * 3）。
timeline.stretch(duration);参数
| 名称 | 类型 | 描述 |
|---|---|---|
| 持续时间 | 数字 |
时间线的新的总持续时间，单位为毫秒 |
返回
时间线本身
可以与其他时间线方法链接。
stretch() 代码示例
import { createTimeline, utils } from 'animejs';
const [ $range ] = utils.$('.range');
const [ $totalDuration ] = utils.$('.value');
const tl = createTimeline({
loop: 1,
alternate: true,
})
.add('.circle', { x: '15rem' })
.add('.triangle', { x: '15rem' }, 500)
.add('.square', { x: '15rem' }, 1000);
const stretchTimeline = () => {
const newDuration = +$range.value;
$totalDuration.textContent = newDuration;
tl.stretch(newDuration).restart();
}
stretchTimeline();
$range.addEventListener('input', stretchTimeline);<div class="large row">
<div class="medium pyramid">
<div class="triangle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
<pre class="large log row">
<span class="label">total duration</span>
<span class="value">0</span>
</pre>
</div>
<div class="medium centered row">
<fieldset class="controls">
<input type="range" min=100 max=2000 value=1000 step=100 class="seek range" />
</fieldset>
</div>