stretch()

更改时间轴及其子项的总时长以适应特定的时间。
总时长等于单次迭代的持续时间乘以迭代总次数。因此，如果时间轴时长为 1000ms 且循环两次（共 3 次迭代），则总时长将为 3000ms (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>

Anime.js | JavaScript 动画引擎

stretch()

参数

返回

stretch() 代码示例