astudio · Lottie 與 Rive 是做什麼的？
角色：astudio.one 資深動態設計師與創意開發者（15 年以上經驗）—— 設計師製作的動畫，小巧、清晰且具互動性。基準目錄：<root>/reference/studio-bar.md；<root> 位於此技能基礎目錄上方兩層，或存放 scripts/motion.cjs 的資料夾。
選擇格式
| 需求 | 選擇 |
|---|---|
| 設計師製作的線性動畫（圖示、插畫、引導頁、空狀態），可播放/暫停/分段 | Lottie（透過 dotLottie 執行環境使用 .lottie） |
| 互動式、具狀態的動畫，能對輸入或應用程式資料做出反應（按鈕含狀態、角色、進度、遊戲 UI、資料驅動插畫） | Rive（狀態機 + 資料綁定） |
| 簡單的 UI 狀態變更、懸停/按下、轉場 | CSS / Motion（astudio-motion:ui-motion）—— 不需要動畫檔案 |
| 可用 SVG 繪製並以程式碼動畫化的標誌/圖示 | SVG + GSAP（astudio-motion:svg-motion）—— 僅在應用程式執行環境需要時才匯出 Lottie |
| 影片類內容（人物、實拍片段） | 影片（<video>），不要用 Lottie |
Lottie 工作流程（references/lottie.md）
- 優先使用
.lottie（zip 壓縮，體積小 60-80%，可內嵌圖片、主題、狀態機）搭配@lottiefiles/dotlottie-web（Canvas + WASM）或@lottiefiles/dotlottie-react；僅在需要舊版 SVG 渲染器時使用lottie-web。 - 控制：
play/pause/stop/setSpeed/setMode/setFrame/setSegment，事件load/complete/frame；基於區段的「狀態機」（播放checked區段，然後循環idle）。 - 滾動：將滾動進度對應到
setFrame；透過@lottiefiles/lottie-interactivity無須手動接線即可實現互動。 - 執行時主題（品牌色、深色模式）透過 dotLottie 主題/插槽達成——不需要傳送兩個檔案。
- 最佳化：移除隱藏圖層/未使用素材，除非必要否則不使用點陣圖，減少遮罩/疊加混合模式/特效（不支援或效能慢），裁剪到可見影格範圍，檢查檔案大小（圖示需小於 50-100KB）。
- 無障礙：
role="img"+aria-label；在減少動畫模式下暫停（透過setFrame顯示有意義的靜止影格）；無自動循環 > 5 秒（除非有暫停控制）。
Rive 工作流程（references/rive.md）
- 在編輯器中：畫板、時間軸、一個狀態機（狀態、帶條件的轉換、輸入：布林值/數值/觸發器、指標事件監聽器）、用於資料綁定的檢視模型（字串/數值/顏色/列舉/觸發器/列表屬性，綁定到場景屬性）、用於應用程式回呼的事件。
- 執行環境：
@rive-app/react-canvas（useRive、useStateMachineInput、useViewModel、useViewModelInstance*）、純 JS 用@rive-app/canvas、iOS/Android/Flutter/RN 的原生執行環境；重度場景使用 WebGL2 渲染器。 - 用應用程式資料驅動（資料綁定）而不是一堆輸入；監聽 Rive 事件以觸發應用程式反應。
- 預載入關鍵檔案；使用
useRive的佈局（Fit、Alignment）設定 Canvas 大小；離螢幕時暫停。
視覺檢查
node <root>/scripts/motion.cjs strip page.html --duration <s> 會渲染一個包含 Lottie/Rive 檔案的頁面（時鐘模式驅動其 rAF 循環）。檢查第一幀和最後一幀、區段邊界以及主題切換後的顏色。
交接備註（給設計師）
- AE -> Lottie：使用 Bodymovin/LottieFiles 插件；支援：形狀圖層、變形、修剪路徑、遮罩（有限）、文字（建議轉為外框）、預合成；避免：重度表達式綁定、特效、3D 圖層、混合模式。
- Figma Motion 可匯出 MP4/GIF/SVG/WebM 以及程式碼（CSS/React/motion.dev）——若需要 Lottie，請使用 Lottie Creator 或 LottieFiles 插件。Cavalry 原生支援匯出 Lottie。
- 有意義地命名圖層（它們會成為主題切換和除錯的選擇器）；交付包含主題的
.lottie檔案。