動畫工程與動態設計

動畫工程與動態設計 是做什麼的？

此技能為代理配備業界標準實務、生產就緒模式與數學物理模型，用以設計及編寫跨網頁與應用程式介面的流暢、高效能動畫。

---

1. 動態效能黃金法則

1. 僅對複合屬性進行動畫處理：
   • 始終優先使用 transform（translate3d、scale、rotate）和 opacity。
   • 絕對不要對幾何屬性（width、height、top、left、margin、padding）進行動畫處理，除非使用 FLIP 技術（First、Last、Invert、Play）。對幾何屬性進行動畫處理會觸發昂貴的佈局重新計算（Reflow）以及在 CPU 上的繪製（Paint）。
2. 負責任地提升至 GPU：
   • 僅在正在進行動畫的元素上使用 will-change: transform, opacity;，並在動畫完成後（若記憶體受限）將其移除。
   • 必要時使用 transform: translateZ(0) 或 backface-visibility: hidden 強制 GPU 圖層合成。
3. 尊重使用者可及性：
   • 始終支援 @media (prefers-reduced-motion: reduce)：

     @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
       }
     }
     

4. 自然時機與持續時間：
   • 微互動（按鈕按下、切換、工具提示）：100ms - 200ms
   • 標準轉場（下拉選單、對話框、抽屜、卡片）：200ms - 350ms
   • 複雜場景轉場 / 頁面轉場：350ms - 500ms
   • 長於 500ms 的動畫會感覺遲緩，除非是連續的大氣背景循環或敘事性故事。

---

2. 技術選擇矩陣

場景 / 需求	推薦工具	原因
簡單的懸停、焦點、啟用狀態、淡入/滑入	CSS 過渡與 @keyframes 或 Tailwind CSS	零 JavaScript 開銷，120 FPS 硬體加速。
React / Next.js UI、模態框、共享佈局轉場	Framer Motion（motion）	宣告式 API、彈簧物理、自動 FLIP（layoutId）、AnimatePresence。
複雜時間軸、SVG 變形、捲動驅動 UI	GSAP (GreenSock) + ScrollTrigger	無可比擬的編排控制、精確的 scrub、跨瀏覽器一致性。
3D 體驗、粒子網路、著色器	Three.js / React Three Fiber / Canvas 2D	直接 WebGL GPU 渲染，可處理數十萬個粒子。
向量動態圖形與角色插圖	Lottie / dotLottie / Rive	小型 JSON/二進位資料、可縮放向量保真度、互動式狀態機。

---

3. 運動曲線（緩動 Token）

除非模擬等速輸送帶或無限旋轉載入器，否則切勿對 UI 移動使用 linear。自然運動會加速和減速：

• 乾脆的進入（標準 UI 彈出/開啟）：cubic-bezier(0.16, 1, 0.3, 1)（Expo Out - 快速初始爆發，平順減速）
• 平順的退出（關閉/解散）：cubic-bezier(0.7, 0, 0.84, 0)（Expo In - 加速離開畫面）
• 自然動態 / 強調：cubic-bezier(0.34, 1.56, 0.64, 1)（輕微超越反彈）
• 彈簧物理（觸控與拖曳的首選）：
  • 剛度：300 - 400
  • 阻尼：25 - 35
  • 質量：0.8 - 1.0

---

4. 深入指南與參考資料

如需全面的程式碼模式和詳細逐步說明，請參閱參考資料：

• CSS 與 Tailwind 動畫參考
• Framer Motion 與 Motion One 模式
• GSAP 與 ScrollTrigger 精通指南
• Three.js 與 Canvas 動態設計
• UI 動態原則與可及性

---

5. 驗證檢查清單

建置動畫元件時：

• 動畫是否流暢（60-120 FPS）且無卡頓或掉幀？
• 動畫期間是否避免了佈局位移（CLS）？
• 退出動畫是否在元素卸載前正確等待完成？
• UI 是否能處理快速點擊/輕觸而不發生故障（可中斷動畫）？
• 是否已實作 prefers-reduced-motion？