mapRange()
将一个 Number 从一个范围映射到另一个范围，或使用预定义范围参数创建映射 Function。
const mappedValue = utils.mapRange(value, fromLow, fromHigh, toLow, toHigh);
const mapperFunction = utils.mapRange(fromLow, fromHigh, toLow, toHigh);参数
| 名称 | 接受 |
|---|---|
| value (opt) | Number |
| fromLow | Number |
| fromHigh | Number |
| toLow | Number |
| toHigh | Number |
返回
如果提供了一个值，则为 Number，否则为一个 可链式调用的工具 Function，用于将数字从一个范围映射到另一个范围：
const mapFrom0and100to0and200 = utils.mapRange(0, 100, 0, 200);
mapFrom0and100to0and200(45); // 90
mapFrom0and100to0and200(120); // 240
mapFrom0and100to0and200(-15); // -30
const normalizeAndClamp = utils.mapRange(-100, 100, 0, 1).clamp(0, 1); // Normalize then clamp between 0 and 1
normalizeAndClamp(50); // 0.75
normalizeAndClamp(120); // 1mapRange() 代码示例
import { animate, utils } from 'animejs';
animate('.normal', {
rotate: '12turn',
duration: 12000,
loop: true,
ease: 'inOut',
});
animate('.mapped', {
rotate: '12turn',
modifier: utils.mapRange(0, 12, 0, 1), // Used as a modifier
duration: 12000,
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 mapped"></div>
<div class="label">mapped [0,12] [0,1]</div>
</div>
</div>