wrap()
将一个Number封装在由 最小值 和 最大值 定义的范围内,或使用预定义的 最小值 和 最大值 参数创建一个封装的Function。
const wrappedValue = utils.wrap(value, min, max);
const wrapperFunction = utils.wrap(min, max);
参数
| 名称 | 接受 |
|---|---|
| value (opt) | Number |
| min | Number |
| max | Number |
返回
如果提供了值,则为Number,否则为 可链式调用的工具 Function,用于将数字封装在指定的 最小值 和 最大值 之间:
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>