AI Skills
hyperframes-animation

hyperframes-animation

熱門

所有 HyperFrames 的動畫知識 — 原子級動作規則、多階段場景藍圖、場景轉場、更廣泛的動態設計技巧，以及七個執行時期適配器（預設 GSAP，加上 Lottie、Three.js、Anime.js、CSS 關鍵影格、Web Animations API、TypeGPU）。用於任何動作或動畫任務：挑選 2-4 條規則並組合，或載入藍圖，或查詢特定執行時期的 API（例如 GSAP 緩動函數 / Lottie 播放器 / Three.js 混合器）。HyperFrames 原生：單一暫停時間軸、可安全搜尋、確定性。

3.1萬星標
3036分支
更新於 2026/6/25
獲取技能源代碼

相關技能

java-refactoring-remove-parameter3.7萬golang-dependency-injection2261karpathy-guidelines19萬
SKILL.md
readonlyread-only
name
hyperframes-animation
description

所有 HyperFrames 的動畫知識 — 原子級動作規則、多階段場景藍圖、場景轉場、更廣泛的動態設計技巧，以及七個執行時期適配器（預設 GSAP，加上 Lottie、Three.js、Anime.js、CSS 關鍵影格、Web Animations API、TypeGPU）。用於任何動作或動畫任務：挑選 2-4 條規則並組合，或載入藍圖，或查詢特定執行時期的 API（例如 GSAP 緩動函數 / Lottie 播放器 / Three.js 混合器）。HyperFrames 原生：單一暫停時間軸、可安全搜尋、確定性。

HyperFrames 動畫

所有動作知識集中在一個技能中：規則（原子級配方）、藍圖（多階段場景模板）、轉場（場景到場景）、技巧（更廣泛的動態設計模式），以及適配器（各執行時期 API）。

關於組合合約（資料屬性、子組合、確定性），請參閱 hyperframes-core。

預設：組合原子規則

從 rules-index.md 中挑選 2-4 條規則，用單一暫停的 GSAP 時間軸將它們組合在一起，完成。這比從藍圖開始更快，產生的程式碼也更少。

在以下情況載入藍圖

  • 場景符合現有的預先設計多階段模板（品牌揭露、社交證明、示範頁面滾動聚光燈等），且重複使用其階段管線能節省實際創作時間
  • 你想要一個複雜 4-5 階段編排的可執行真實程式碼

藍圖位於 blueprints-index.md。每個條目指向 blueprints/<id>.md（配方）和 examples/<id>.html（可執行範例）。不要投機地讀取它；只有在你已經決定需要場景層級編排時才載入。

路由

想要… 閱讀
根據觸發條件 / 標籤挑選原子動作模式 rules-index.md
讀取一條規則的完整 HTML / CSS / GSAP 配方 rules/<name>.md
挑選多階段場景模板 blueprints-index.md
讀取一個藍圖的完整配方 blueprints/<id>.md + examples/<id>.html
編寫場景轉場（CSS 驅動，在兩個片段之間） transitions/overview.md, transitions/catalog.md
查詢更廣泛的動態設計技巧 techniques.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
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
具名文字動畫效果（24 個 ID，透過外部 animate-text 技能） 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 內部建構時間軸）。此處不重述。

在核心合約之上新增的動畫工藝：

  • 預先計算的佈局常數 — 絕不在補間時間從 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。用於在創作後稽核編排（死區、交錯一致性、生命週期警告）。

另請參閱

  • hyperframes-core — 組合結構、資料屬性、子組合、確定性渲染合約
  • hyperframes-creative — 調色盤、排版、敘事、節奏規劃（非動畫創意方向）
  • hyperframes-cli — npx hyperframes lint / validate / inspect / preview / render