lerp()
根据给定的 进度 在两个数字之间插值,或使用预定义的 起始 和 结束 参数创建插值函数。
const interpolatedValue = utils.lerp(start, end, progress);
const interpolatorFunction = utils.lerp(start, end);
参数
| 名称 | 接受 |
|---|---|
| start | Number |
| end | Number |
| progress (opt) | Number ([0 - 1]) |
返回
如果提供了进度值,则为Number,否则为 可链式使用的工具 Function,用于在指定的 起始 值和 结束 值之间插值:
const interpolateBetween0and100 = utils.lerp(0, 100);
interpolateBetween0and100(0.5); // 50
interpolateBetween0and100(0.75); // 75
interpolateBetween0and100(0.25); // 25
const interpolateAndRound = utils.lerp(0, 100).round(2); // Interpolate then round to 2 decimal places
interpolateAndRound(0.677523); // 67.75
interpolateAndRound(1.202514); // 100 lerp() 代码示例
import { animate, utils } from 'animejs';
animate('.normal', {
rotate: '1turn',
duration: 3000,
loop: true,
ease: 'inOut',
});
animate('.interpolated', {
rotate: '1turn',
modifier: utils.lerp(0, 12), // Interpolates 0 to 12 by passing the rotate progress value 0 to 1
duration: 3000,
loop: true,
ease: 'inOut',
});
<div class="x-large spaced-evenly row">
<div class="col">
<div class="clock normal"></div>
<div class="label">normal</div>
</div>
<div class="col">
<div class="clock interpolated"></div>
<div class="label">interpolated [0,12]</div>
</div>
</div>