gsap.utils 工具函数
动画经常要把「鼠标 X、滚动进度、0~1」映射成位移或颜色。 这些函数不创建 tween，只做数值处理。
| 函数 | 作用 | 例子 |
|---|---|---|
mapRange(inMin, inMax, outMin, outMax, value) |
线性映射 | 进度 0~1 → x 0~400 |
clamp(min, max, value) |
限制范围 | 倾斜角不超过 ±12° |
interpolate(a, b, progress) |
插值；a/b 可以是颜色字符串 | interpolate("#fff", "#000", 0.5) |
wrap(min, max, value) |
越界回绕 | 无限轮播下标 |
snap(increment | array, value) |
吸附 | 计数器取整 snap: 1 |
random(min, max) / random(arr) |
随机 | 粒子初速度 |
unitize(fn, unit) |
给数字结果加单位 | 配合 mapRange 输出 "12px" |
toArray(selector) |
统一成数组 | NodeList → Array |
pipe(fn1, fn2, ...) |
函数组合 | mapRange 后再 clamp |
normalize(min, max, value) |
压到 0~1 | mapRange 的特例 |
即时计算
mapRange(0, 100, 0, 500, 50) =
clamp(0, 10, 15) =
interpolate("#3b82f6", "#ef4444", 0.5) =
wrap(0, 5, 7) =
random(1, 100) =
clamp(0, 10, 15) =
interpolate("#3b82f6", "#ef4444", 0.5) =
wrap(0, 5, 7) =
random(1, 100) =
gsap.utils.mapRange(0, 100, 0, 500, 50); // 250
gsap.utils.clamp(0, 10, 15); // 10
gsap.utils.wrap(0, 5, 7); // 2 （区间 [0,5) 回绕）拖滑条：把 0~100 映射成盒子 x
MAP
const mapX = gsap.utils.mapRange(0, 100, 0, 480);
range.oninput = () => gsap.set("#mapBox", { x: mapX(range.value) });