以 skill 自身的术语
gsap.utils 是 GSAP 提供的一组纯辅助函数,用于数学运算、区间、单位、颜色和集合处理,无需注册即可使用。该 skill 记录了 clamp、mapRange、normalize、interpolate、random、snap、shuffle、distribute、getUnit、unitize、splitColor、selector、toArray、pipe、wrap 和 wrapYoyo 的函数签名、默认值以及实际输出示例。
它适用于需要将 scroll 映射到某个数值、对输入进行归一化、按网格吸附或在组件内限定选择器范围的 GSAP 代码编写者与审阅者。文件中贯穿一个统一模式:省略末尾的值参数即可得到可复用的函数,唯一的例外是 random(),它需要传入 true。
它产出什么
- 当你传入 value 参数时,直接返回转换后的值
- 一个可复用的函数,用于对之后传入的值进行 clamp、映射、归一化或吸附处理
- 一个元素相同但顺序随机打乱的新数组
- 一个限定范围的选择器函数,只会在给定元素或 ref 内查找元素
工作方式
- 01辅助函数都挂在 gsap.utils 上
这些 utils 都是无需注册的纯辅助函数,可以在任何由 JS 驱动 GSAP 的地方调用:tween 变量、ScrollTrigger 或 Observer 回调中均可使用。
- 02把值放在最后传入,立即得到结果
大多数 util 会先接收配置参数,最后一个参数才是要转换的值,并立即返回转换结果。
- 03不传该值即可得到函数形式
省略最后的值参数,util 就会返回一个函数,供你之后传入具体值调用,这样一份配置就能服务于多个不同的值。
- 04记住 random() 的模式是反过来的
random() 的可复用形式并不依赖省略参数;你需要把 true 作为最后一个参数传入,才能得到一个每次调用都返回新值的函数。
- 05snap 也可以直接在 tween 中设置
对于基于网格或步进的运动,你可以直接在 tween 变量中传入 snap,而不必先调用该 util。
- 06用 pipe 串联多个转换
pipe 会从左到右组合函数,因此可以把 normalize 和 snap 组合成单个函数,直接在 tween 或回调中使用。