stretch()

更改定时器的总持续时间以适应特定时间。
总持续时间等于迭代持续时间乘以总迭代次数。因此，如果定时器的持续时间为 1000 毫秒并循环两次（总共 3 次迭代），则总持续时间为 3000 毫秒（1000 * 3）。

timer.stretch(duration);

参数

名称	类型	描述
duration	`数字`	定时器的新总持续时间，单位为毫秒

定时器本身

可以与其他定时器方法链式调用。

stretch() 代码示例

import { animate, utils } from 'animejs';

const [ $range ] = utils.$('.range');
const [ $duration ] = utils.$('.duration');
const [ $time ] = utils.$('.time');

const timer = createTimer({
  duration: 2000,
  onUpdate: self => $time.innerHTML = self.currentTime
});

const stretchTimer = () => {
  timer.stretch(+$range.value);
  $duration.innerHTML = utils.round(timer.duration, 0);
  timer.restart();
}

$range.addEventListener('input', stretchTimer);

<div class="large centered row">
  <div class="col">
    <pre class="large log row">
      <span class="label">duration</span>
      <span class="duration value">2000</span>
    </pre>
  </div>
  <div class="col">
    <pre class="large log row">
      <span class="label">current time</span>
      <span class="time value lcd">0</span>
    </pre>
  </div>
</div>

<div class="medium row">
  <fieldset class="controls">
    <input type="range" min=0 max=4000 value=2000 step=100 class="range" />
  </fieldset>
</div>

上一个 下一个

Anime.js | JavaScript 动画引擎

stretch()

参数

返回

stretch() 代码示例