工具
gsap.utils 實驗室
clamp / mapRange / normalize / snap / interpolate / wrap 互動視覺化，含函式形式。
導讀
utils 是純函式助手。省略最後 value 會回傳可重用函式——高頻 handler 必備。
- 看什麼
- 拖滑桿時各 util 輸出；顏色 interpolate 的中間色。
- 怎麼試
- 改 min/max 與 snap 步進，組 pipe 鏈看結果。
Skill 對應：clamp, mapRange, normalize, snap, interpolate, wrap, pipe
- 省略最後 value → 回傳可重用函式：
const c = clamp(0,100); c(150) - 例外：
random()要函式形式需最後參數true mapRange/normalize只處理數字，單位另用 getUnit- tween 內可用字串
"random(-100,100)"或snap: { x: 20 }
const map = gsap.utils.mapRange(0, 100, 0, 360);
map(50); // 180
gsap.utils.clamp(0, 100, 150); // 100
gsap.utils.snap(10, 23); // 20gsap.utils
拖動 input 值，觀察各 util 輸出與顏色插值
| util | expression | result |
|---|---|---|
| clamp | — | — |
| normalize | — | — |
| mapRange | — | — |
| snap | — | — |
| wrap | — | — |
| interpolate | — | — |
| pipe | — | — |