拉伸() JS

更改动画的总时长及其补间动画的持续时间，以适配特定的时间。
总时长等于单次迭代的持续时间乘以迭代的总次数。因此，如果动画时长为 1000ms 且循环两次（总共 3 次迭代），则总时长为 3000ms（1000 * 3）。

animation.stretch(duration);

参数

名称	类型	描述
持续时间	`数字`	动画的新总时长（以毫秒为单位）

将动画拉伸（stretch）至 0 也会将其所有补间动画的持续时间设置为 0，这会使它们在后续调用 stretch() 时长度保持一致。

动画本身

可与其他动画方法链式调用。

stretch() 代码示例

import { animate, utils, stagger } from 'animejs';

const [ $range ] = utils.$('.range');
const [ $totalDuration ] = utils.$('.value');

const animation = animate('.square', {
  x: '17rem',
  ease: 'inOutSine',
  delay: stagger(200),
});

const stretchAnimation = () => {
  const newDuration = +$range.value;
  $totalDuration.textContent = newDuration;
  animation.stretch(newDuration).restart();
}

stretchAnimation();

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

<pre class="large log row">
  <span class="label">total duration</span>
  <span class="value">0</span>
</pre>
<div class="medium row">
  <div class="square"></div>
</div>
<div class="medium row">
  <div class="square"></div>
</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 动画引擎

拉伸() JS

参数

返回

stretch() 代码示例