mapRange() V4

将 Number 从一个范围映射到另一个范围，或创建具有预定义范围参数的映射 Function。

const mappedValue = utils.mapRange(value, fromLow, fromHigh, toLow, toHigh);
const mapperFunction = utils.mapRange(fromLow, fromHigh, toLow, toHigh);

参数

名称	接受
value ^(opt)	`数字`
fromLow	`数字`
fromHigh	`数字`
toLow	`数字`
toHigh	`数字`

如果提供值，则返回 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); // 1

mapRange() 代码示例

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>

上一个 下一个