lerp() V4
在两个值之间执行线性插值。
amount 值越接近 1，结果越接近结束值。
utils.lerp() 函数是帧率无关的。
const lerped = utils.lerp(start, end, amount);参数
| 名称 | 接受 |
|---|---|
| 起始值 | 数字 |
| 结束值 | 数字 |
| 数值 | 数字 [0-1] |
返回
数字
utils.lerp(0, 100, 0); // 0
utils.lerp(0, 100, 0.5); // 50
utils.lerp(0, 100, 1); // 100lerp() 代码示例
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 loop = createTimer({
onUpdate: clock => {
const sourceRotate = utils.get($input, 'rotate', false);
const lerpedRotate = utils.get($lerped, 'rotate', false);
utils.set($lerped, {
rotate: utils.lerp(lerpedRotate, sourceRotate, .075) + 'turn'
});
}
});
const loop15fps = createTimer({
frameRate: 15,
onUpdate: clock => {
const sourceRotate = utils.get($input, 'rotate', false);
const lerpedRotate = utils.get($lerped15fps, 'rotate', false);
utils.set($lerped15fps, {
rotate: utils.lerp(lerpedRotate, sourceRotate, .0725, clock) + '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"></div>
<div class="label">lerped</div>
</div>
<div class="col">
<div class="clock lerped-15"></div>
<div class="label">lerped 15fps</div>
</div>
</div>