wrap() V4

将 Number 值包裹在由 min 和 max 值定义的范围内，或者创建一个使用预定义 min 和 max 参数的包裹 Function。

const wrappedValue = utils.wrap(value, min, max);
const wrapperFunction = utils.wrap(min, max);

参数

名称	接受
值 ^(可选)	`数字`
最小值	`数字`
最大值	`数字`

返回值

如果提供了值，则返回 Number，否则返回一个链式工具 Function，用于包裹指定 min 和 max 值之间的数字

const wrapBetween0and100 = utils.wrap(0, 100);
wrapBetween0and100(105); // 5
wrapBetween0and100(220); // 20
wrapBetween0and100(-15); // 85

const wrapAndRound = utils.wrap(0, 100).round(2); // Wrap then round to 2 decimal places
wrapAndRound(105.7523); // 5.75
wrapAndRound(220.2514); // 20.25

wrap() 代码示例

import { animate, utils } from 'animejs';

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

animate('.wrapped', {
  rotate: '1turn',
  modifier: utils.wrap(-.25, .25), // Used as a modifier
  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 wrapped"></div>
    <div class="label">wrapped [-.25,.25]</div>
  </div>
</div>