stretch()
将计时器的总持续时间更改为适应特定时间。
总持续时间等于一次迭代的持续时间乘以迭代总次数。因此,如果一个计时器的持续时间为1000毫秒并循环两次(总共3次迭代),则总持续时间为3000毫秒(1000 * 3)。
timer.stretch(duration);
参数
| 名称 | 类型 | 描述 |
|---|---|---|
| duration | Number |
计时器的新总时长(毫秒) |
返回
计时器本身
可以与其他计时器方法链式调用。
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 = timer.duration;
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>