跳过主要内容

normalize

将一个给定范围内的值映射到 0 到 1 范围内的相应位置。这与mapRange()相同,但 outMin/outMax 被硬编码为 0/1。


请选择以下其中一种方法签名——要么立即获取一个归一化后的值,要么省略valueToNormalize参数以获取一个可重复使用的函数,该方法会记住初始范围,以便之后可以多次传入需要归一化的值:

1) normalize(minimum, maximum, valueToNormalize)

  1. 最小值:数值 - 初始映射范围的下限
  2. 最大值:数值 - 初始映射范围的上限
  3. valueToNormalize: 数字 - 需要归一化的值。

返回: 归一化后的数字

示例

// in the -10 to 10 range, normalize the number 0 (map it to the corresponding position between 0 and 1)
gsap.utils.normalize(-10, 10, 0); // 0.5

// in the 0 to 100 range, map the number 25
gsap.utils.normalize(0, 100, 25); // 0.25

2) normalize(minimum, maximum)

  1. 最小值:数值 - 初始映射范围的下限
  2. 最大值:数值 - 初始映射范围的上限

返回: 一个可复用的函数,它接受一个参数——要归一化的值

如果你省略了valueToNormalize(第三个)参数,该工具方法将返回一个可重复使用的函数它根据最初提供的范围准备好归一化任何值。换句话说,返回的函数会记住这个范围,因此可以在之后快速高效地多次执行归一化操作。

示例

// get a function that will always normalize for a range between 0 and 100
var clamper = gsap.utils.normalize(0, 100); // notice we didn't provide a valueToNormalize

// now we can reuse the function to normalize any values:
console.log(clamper(50)); // 0.5
console.log(clamper(10)); // 0.1
console.log(clamper(75)); // 0.75

提示:组合使用多个可重复使用的函数实现强大的数据转换!

你可以pipe()将几个可重复使用的函数限制范围, 映射到另一个范围,对齐, 插值,以及等等。例如:

// get a clamping function that will always clamp to a range between 0 and 100
var transformer = gsap.utils.pipe(
// clamp between 0 and 100
gsap.utils.clamp(0, 100),

// then map to the corresponding position on the width of the screen
gsap.utils.mapRange(0, 100, 0, window.innerWidth),

// then snap to the closest increment of 20
gsap.utils.snap(20)
);

// now we feed one value in and it gets run through ALL those transformations!:
transformer(25.874);

视频演示:结合使用工具方法

无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗