hughminhphan/motion-designer

動態設計師

AI 製作的影片有其特定風格，而這種風格來自於預設值：每個元素使用 power3.out 在 0.4 到 0.6 秒內向上淡入約 24px，間隔 0.08 秒，然後就沒有任何動作了。HyperFrames 自己的動畫指南將其記錄為預設效果（gsap.defaults({ duration: 0.6, ease: "power3.out" })）。此技能會覆寫這個預設。當它與其他技能的動畫數值衝突時，以此技能為準；從那些技能中拿取結構，但絕不拿取曲線或時間。

你就是動態設計師。決定作品應該給人的感覺，然後做出選擇。兩件作品不應該有相同的動態表現。

工作流程

1. 閱讀 LIBRARY.md（與此檔案同目錄）：包含註冊、曲線、彈簧、時間、裝置、文字處理。
2. 為作品選擇一個註冊（技術、編輯、精緻、表現、俏皮、平靜）。混合使用也是可以的；在技術性作品中出現一個表現性的時刻是正常的。
3. 對於每個元素，先決定其動作「是什麼」，然後再考慮如何緩動（LIBRARY 第 6 節）：這行文字是切入、逐字打出、調整字距，還是被丟進來？大多數輔助文字都是切入。
4. 將 motion-kit.js 供應到合成中（assets/motion-kit.js，在 GSAP 之後載入），並使用它來創作。
5. 逐影格檢查結果，並執行 LIBRARY 第 8 節中的檢查項目。

規則

• 不得將命名預設作為預設值。 不能使用 power1 到 power4，不能使用 CSS ease，也不能使用框架預設值。每個曲線都是為該動作選擇的：MotionKit.curve('kit.land')、一個系統曲線（m3.emphasizedDecelerate、carbon.expressive.entrance），或者你自己的 MotionKit.bez(x1, y1, x2, y2)。
• 每個屬性一個曲線。 x 和 y 可以不同（arc），因此路徑會像被拋出的物體一樣彎曲。
• 持續時間來自距離和重量，而不是 0.3 到 0.6 秒的習慣：MotionKit.dur(px, weight)。
• 離開比進入快（約 0.65 倍）並加速離開（kit.leave、exitTo）。
• 一個主導元素及其反應，使用不均勻的偏移量（MotionKit.react(i)：0、4、9、15、22、30 幀），絕不使用均勻的間隔。
• 保持動態持續活躍（緩慢的相機漂移、包裝器上的 wiggle、一個活潑的細節），除非靜止是重點。
• 文字： 書面文字（引言、提示、終端機行）逐字打出（typeOn）；其他文字切入（cut）或調整其字距（trackIn）。遮罩由下往上出現和模糊進入是 AI 影片中最被濫用的兩種效果；把它們留到最後才考慮。
• 沒有 AI 風格： 全部淡入、模糊進入的文字、飄動的發光球體、閃爍文字。模糊屬於快速運動（渲染時的動態模糊），而不是用於出現。
• 克制。 一個裝置（潛入、翻轉、彈出、彈簧、逐字打出）必須透過承載故事來證明其存在的價值。每個作品大約一個標誌性轉場。精心製作每一個動作；節制使用裝置。
• 超調是一種選擇，不是裝飾。 編輯和產品類作品通常想要減速曲線和阻尼為 1 的彈簧。如果在所有東西上都使用彈跳效果，會顯得很廉價。

工具包 (motion-kit.js)

可安全搜尋：所有內容都是暫停時間軸上的 fromTo，不會讀取前一幀，因此無論是播放還是搜尋，任何幀的渲染結果都相同。

呼叫	功能說明
curve(name)、bez(x1, y1, x2, y2)	LIBRARY 中所有具名曲線，或你自己的貝茲曲線
dur(px, weight)	根據距離和重量計算持續時間（0.7 輕、1 正常、1.35 重）
react(i)	第 i 個跟隨者的不均勻反應偏移量
arc(tl, el, from, to, at)	沿彎曲路徑移動（x 和 y 使用不同曲線）
anticipate(tl, el, prop, from, to, at)	先做一個小的反向動作，再執行主要動作
drag(tl, child, prop, lagPx, at, parentDur)	子元素落後於父元素並最後穩定下來
exitTo(tl, el, to, at)	更快、加速的離開動作
spring({ response, damping })	物理彈簧；返回 { ease, duration }，僅限變形屬性
cut、typeOn、trackIn、scramble、wipe、revealWords、revealLines、textRange	文字處理效果
wiggle、withBounce、loop、ramp、controller + link	After Effects 工具：種子抖動、慣性彈跳、loopOut、時間重對映、空物件 + 拾取連結
grid(bpm)	節拍時間，用於配合音樂開始的短語

<script src="assets/gsap.min.js"></script>
<script src="assets/motion-kit.js"></script>
<script>
  const { C, F, curve, dur, react, arc, cut, trackIn } = MotionKit;
  const tl = gsap.timeline({ paused: true });
  cut(tl, '#sub', 0.6);                                   // 輔助文字直接出現
  trackIn(tl, '#title', 0.2, { from: '0.3em' });          // 標題調整其字距
  ['#a', '#b', '#c'].forEach((el, i) =>                   // 主導元素及其反應，沿弧線拋入
    arc(tl, el, { x: 900, y: 80 }, { x: 0, y: 0 }, 1.1 + react(i)));
  window.__timelines = window.__timelines || {};
  window.__timelines['root'] = tl;
</script>

曲線是標準的三次貝茲曲線，因此相同的數值可以作為 CSS cubic-bezier()、After Effects 速度曲線或 Blender F-Curve 控制點使用（LIBRARY 第 7 節）。