interpolate() V4

根据给定的进度在两个数字之间插值，或者创建一个具有预定义start和end参数的插值Function。

const interpolatedValue = utils.interpolate(start, end, progress);
const interpolatorFunction = utils.interpolate(start, end);

参数

名称	接受
开始	`数字`
结束	`数字`
进度 ^(可选)	`数字` (`[0 - 1]`)

如果提供了进度值，则返回一个数字；否则返回一个链式工具 Function，用于在指定的start和end值之间插值

const interpolateBetween0and100 = utils.interpolate(0, 100);
interpolateBetween0and100(0.5);  // 50
interpolateBetween0and100(0.75); // 75
interpolateBetween0and100(0.25); // 25

const interpolateAndRound = utils.interpolate(0, 100).round(2); // Interpolate then round to 2 decimal places
interpolateAndRound(0.677523); // 67.75
interpolateAndRound(1.202514); // 100

interpolate() 代码示例

import { animate, utils } from 'animejs';

animate('.normal', {
  rotate: '1turn',
  duration: 3000,
  loop: true,
  ease: 'inOut',
});

animate('.interpolated', {
  rotate: '1turn',
  modifier: utils.interpolate(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>