damp() V4
一个帧率无关的 utils.lerp() 版本，用于在两个值之间执行线性插值。
amount 越接近 1，结果越接近 end 值。
const lerped = utils.lerp(start, end, deltaTime, amount);参数
| 名称 | 接受 |
|---|---|
| 开始 | 数字 |
| 结束值 | 数字 |
| 增量时间 | 数字 (毫秒) |
| 量 | 数字 [0-1] |
返回
数字
utils.damp(0, 100, 8, 0); // 0
utils.damp(0, 100, 8, 0.5); // 50
utils.damp(0, 100, 8, 1); // 100damp() 代码示例
import { animate, createTimer, utils } from 'animejs';
const [ $input ] = utils.$('.input');
const [ $lerped ] = utils.$('.lerped');
const [ $lerped15fps ] = utils.$('.lerped-15');
animate($input, {
rotate: '1000turn',
modifier: utils.snap(.25),
duration: 4000000,
loop: true,
ease: 'linear',
});
const dampedLoop = createTimer({
frameRate: 15,
onUpdate: clock => {
const sourceRotate = utils.get($input, 'rotate', false);
const lerpedRotate = utils.get($lerped15fps, 'rotate', false);
utils.set($lerped15fps, {
rotate: utils.damp(lerpedRotate, sourceRotate, clock.deltaTime, .075) + 'turn'
});
}
});
const lerpedLoop = createTimer({
frameRate: 15,
onUpdate: () => {
const sourceRotate = utils.get($input, 'rotate', false);
const lerpedRotate = utils.get($lerped, 'rotate', false);
utils.set($lerped, {
rotate: utils.lerp(lerpedRotate, sourceRotate, .075) + 'turn'
});
}
});<div class="x-large spaced-evenly row">
<div class="col">
<div class="clock input"></div>
<div class="label">input</div>
</div>
<div class="col">
<div class="clock lerped-15"></div>
<div class="label">damped 15fps</div>
</div>
<div class="col">
<div class="clock lerped"></div>
<div class="label">lerped 15fps</div>
</div>
</div>