# GSAP ## 導入優勢 / 成本 - (O) 瀏覽器支援度高、垂直或水平視窗也都能 handle - (O) 效能優勢大於原生 CSS - 效果平滑，搭配 plugin，SplitText (自己寫很痛苦), Draggable, flip, scroll, etc... - (O) 不限於框架 - 底層是用 `DOMElement.querySelector()` 選取 element - (O) 生態系完整 - 官方 Demo 也很豐富 - 定期更新功能 - plugins 補足額外功能 - (X) 較肥大，要注意 bundle size - (X) 學習曲線高，有很多 API --- ## 使用概念 ### 核心功能解釋 - `Tween`：定義動畫的*起始* + *效果*（類似把 CSS 的 animation + keyfrom 整合起來的 object，搭配不同 method） - `Timeline`：以 builder 模式串接多個 tweens，參數很自由（+-, %, center 都可以） - `position`（第三個參數）：animation 的 delay 概念 - `ease`：自定義物理上的 n 階段要使用什麼配速（是動畫中的重要元素） - methods：搭配不同行為操作，類似 HTML 的 asset instance（e.g. `video.play()`） ### Plugin 範例 - ScrollTigger：如何影響 tween / timeline 的 trigger - `scrub` - `toggleActions`（是哪些 actions 能 trigger tween / timeline） --- ## 實作細節 ### 效能問題 小物件更適合 CSS，大型且複雜的動畫，需要更多 JS 操作，由 GSAP 的（WebGL, WebGPU）底層呼叫不同的 API，會更節省 calculation & memory（補充：Canvas 是使用 GPU 來儲存相關的圖片） ### 前端開發需要注意的細節 - 素材的檔案大小 - 解析素材的瀏覽器支援度 - 時間點控制（*網速* 也會影響素材呈現的精確度） - 與設計溝通上是如何溝通呈現劇本 - 設計先給預期效果呈現，接著工程直接實驗的 fine tuning --- ## FAQ - 付費功能涵蓋範圍？ - 開發時，有協助檢查功能的工具嗎？ - 設計方是否有動畫上的 樣板 or 工具 能呈現整個效果進行？ - 與設計溝通時，會如何決定最後採用的素材格式？