clamp() V4

将 Number 限制在指定的 min 和 max 值之间，或创建一个带有预定义 min 和 max 参数的 clamping Function。

const clampedValue = utils.clamp(value, min, max);
const clamperFunction = utils.clamp(min, max);

参数

名称	接受
value ^(可选)	`Number`
min	`Number`
max	`Number`

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

const clampBetween0and100 = utils.clamp(0, 100);
clampBetween0and100(90);  // 90
clampBetween0and100(120); // 100
clampBetween0and100(-15); // 0

const clampAndRound = utils.clamp(0, 100).round(2); // Clamp then round to 2 decimal places
clampAndRound(72.7523); // 72.75
clampAndRound(120.2514); // 100

clamp() 代码示例

import { animate, utils } from 'animejs';

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

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