外掛安裝： 在執行設定或更新命令前，若此技能位於 HyperFrames 外掛內，請遵循外掛執行規則。獨立安裝則保留下列更新說明。
HyperFrames 動畫
所有運動知識集於一項技能：規則（原子級配方）、藍圖（多階段場景範本）、過渡（場景到場景）、技術（更廣泛的動態設計模式）以及適配器（各運行時 API）。
關於構圖合約（資料屬性、子構圖、確定性），請參閱 hyperframes-core。
預設：組合原子規則
從 rules-index.md 挑選 2-4 條規則，用一個暫停的 GSAP 時間軸將它們組合起來即可。這比從藍圖開始編寫更快，產生的程式碼也更少。
在以下情況載入藍圖
- 場景符合既有的預先設計多階段範本（品牌揭曉、社會證明等），且重複使用其階段流程能節省實際創作時間
- 你想要一個可運行的真實程式碼，來實現複雜的 4-5 階段編舞
藍圖存放在 blueprints-index.md 中。每條項目指向 blueprints/<id>.md（配方）。請勿投機性地讀取；僅在你已決定需要場景級別編排時才載入它。
路由
| 你想要… | 請閱讀 |
|---|---|
| 透過觸發條件 / 標籤挑選一個原子運動模式 | rules-index.md |
| 閱讀一條規則的完整 HTML / CSS / GSAP 配方 | rules/<name>.md |
| 挑選一個多階段場景範本 | blueprints-index.md |
| 閱讀一個藍圖的完整配方 | blueprints/<id>.md |
| 創作一個場景過渡（CSS 驅動，在兩個片段之間） | transitions/overview.md, transitions/catalog.md |
| 查詢更廣泛的動態設計技術 | techniques.md |
| 運動模糊 — 元素上的快門模糊效果，以及何時不應使用 | references/motion-blur.md |
| 分析現有構圖的動畫圖譜 | scripts/animation-map.mjs |
| GSAP API — 時間軸 / 補間動畫 / 位置參數 | adapters/gsap.md |
| GSAP — 即插即用效果配方 | rules/gsap-effects.md |
| GSAP — 轉換 / 效能 | adapters/gsap-transforms-and-perf.md |
| GSAP — 緩動 / 交錯 | adapters/gsap-easing-and-stagger.md |
| GSAP — 時間軸 / 標籤 | adapters/gsap-timeline-and-labels.md |
Lottie / dotLottie（After Effects 匯出，window.__hfLottie） | adapters/lottie.md |
| 角色動畫（行走循環、吉祥物、關節木偶、手勢） | adapters/lottie.md → 角色 |
Three.js / WebGL（3D 場景，AnimationMixer，hf-seek） | adapters/three.md |
Anime.js（window.__hfAnime） | adapters/animejs.md |
CSS 關鍵幀（animation-delay / play-state / fill-mode） | adapters/css-animations.md |
Web Animations API（element.animate()，currentTime 尋址） | adapters/waapi.md |
TypeGPU / WebGPU（navigator.gpu、WGSL、計算管線） | adapters/typegpu.md |
HTML-作為紋理 + WebGL/GLSL 後期特效（透過 drawElementImage 捕捉即時 DOM） | adapters/html-in-canvas-patterns.md |
具名文字動畫效果（透過外部 animate-text 技能的 24 個 ID） | adapters/animate-text.md |
選擇運行時
- GSAP 是 95% 動畫工作的預設引擎 — 涵蓋時間軸編排、轉換、緩動和交錯。此技能中的所有原子規則都以 GSAP 為基礎。
- Lottie 用於資產本身具有預先烘焙的時間軸（通常是 After Effects 匯出）的情況，包括會行走、做手勢或做出反應的角色。
- Three.js 用於 3D 場景、攝影機運動、著色器驅動的視覺效果。
- Anime.js 用於輕量級補間動畫，當 GSAP 過於繁重時。
- CSS 用於簡單的重複模式、裝飾、閃光效果 — 不需要 JavaScript 動畫成本。
- WAAPI 用於原生瀏覽器關鍵幀動畫，避免 GSAP 依賴。
- TypeGPU / WebGPU 用於 GPU 渲染的畫布（粒子、液體玻璃、自訂著色器）。
多種運行時可以在一個構圖中共存。每個運行時都會將其實例註冊到各自的運行時專用全域物件上，以便 HyperFrames 能夠一次性尋找到所有實例。
關鍵約束
先決條件：hyperframes-core → 不可協商的規則（單一暫停時間軸，data-duration 控制長度，無 Math.random / Date.now / performance.now，無 repeat: -1，無頁面載入時對後續場景片段執行 gsap.set，無 display 或原始 visibility 補間動畫，以及在 async / setTimeout / Promise 內部建構時間軸）。核心允許在明確的時間軸邊界使用 GSAP 的 autoAlpha 和零持續時間的可見性設定。僅在非片段元素或片段內部的包裝器上使用這些例外；框架擁有 .clip 的生命週期。此處不重述完整合約。
在核心合約之上的動畫製作補充：
- 預計算的佈局常數 — 永遠不要在補間動畫執行時透過
getBoundingClientRect()推導位置。補間動畫時的 DOM 測量會因為渲染器並行取樣而導致不同步；請在構圖設定時一次性計算座標並重複使用。 - 空間運動僅使用 GSAP 轉換別名（
x、y、scale、rotation）。核心的允許列表也允許對非空間屬性使用opacity/color/backgroundColor/borderRadius進行補間 — 但永遠不要使用width/height/top/left進行佈局更改。
腳本
node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
讀取所有註冊在 window.__timelines 上的 GSAP 時間軸，枚舉補間動畫，取樣邊界框，計算標記，並輸出 animation-map.json。用它在創作後審查編排（死區、交錯一致性、生命週期警告）。
animation-map.mjs 會優先從目前專案解析輔助套件，然後可以引導使用捆綁的 HyperFrames 套件版本。僅在技能於捆綁的 CLI/技能安裝外部執行，且你需要明確固定該引導版本時，才設定 HYPERFRAMES_SKILL_PKG_VERSION=<version>。
另請參閱
hyperframes-core— 構圖結構、資料屬性、子構圖、確定性渲染合約hyperframes-creative— 調色盤、排版、敘事、節奏規劃（非動畫創意方向）hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render