clamp()
限制一个Number在指定的 最小 和 最大 值之间,或创建一个具有预定义 最小 和 最大 参数的钳位Function。
const clampedValue = utils.clamp(value, min, max);
const clamperFunction = utils.clamp(min, max);
参数
| 名称 | 接受 |
|---|---|
| value (opt) | Number |
| min | Number |
| max | Number |
返回
如果提供了值,则为Number,否则为 可链式工具 Function,用于将数字限制在指定的 最小值 和 最大值 之间:
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>