gsap 是做什麼的？
適用於 HyperFrames 的 GSAP 動畫參考指南。涵蓋 gsap.to()、from()、fromTo()、緩動、交錯、預設值、時間軸（gsap.timeline()、位置參數、標籤、嵌套、播放控制）及效能優化（轉換、will-change、quickTo）。在撰寫 HyperFrames 合成中的 GSAP 動畫時，請使用此指南。
基礎補間方法
- gsap.to()：從當前狀態動畫到目標值。
- gsap.from()：從起始值動畫到當前狀態。
- gsap.fromTo()：同時定義起始與結束值。
緩動函數
支援的緩動類型包含 power1、power2、power3、power4、back、elastic 等。可搭配 ease 屬性使用。
交錯與預設值
- 交錯：透過
stagger屬性為多個元素建立時間差動畫。 - 預設值：使用
gsap.defaults()設定全域預設屬性。
時間軸
- gsap.timeline()：建立依序播放的動畫序列。
- 位置參數：在
to()等方法中使用"<"、"+=0.5"等參數控制相對時間。 - 標籤：透過
addLabel()在時間軸上設定標記點。 - 嵌套時間軸：可將子時間軸加入主時間軸。
- 播放控制：提供
play()、pause()、reverse()、seek()等方法。
效能優化
- 轉換：優先使用
x、y、scale、rotation等 transform 屬性，以觸發 GPU 加速。 - will-change：對即將動畫的元素設定
will-change: transform。 - quickTo：使用
gsap.quickTo()建立高效能的函式，反覆觸發動畫。
使用範例
// 基本 to 動畫
gsap.to(".box", { duration: 1, x: 100, ease: "power2.out" });
// 時間軸
gsap.timeline()
.to(".box", { duration: 1, x: 100 })
.to(".box", { duration: 1, y: 100 }, "+=0.5");