mediastorm-motion-graphics

MediaStorm 運動圖形

運用運動來釐清資訊、引導注意力，並在穩定的幀網格上呈現變化。此技能涵蓋四種相關但不同的任務：參數動畫、點追蹤標籤、數字閃現，以及計時器/包裝構建。

使用時機

• 需要為推近、平移或構圖變化設定縮放/位置關鍵幀與緩動效果。
• 標籤需跟隨移動中的特徵，但無須繼承不必要的縮放或透視。
• 數字、價格、計數器或計時器需要快速變化且保持可讀性。
• 包裝元素需要進場/出場動畫、遮罩窗口或預設效果。
• 運動設計需移交給 Remotion 或以 TypeScript 實作。

請勿將此技能用於平面追蹤（請轉至 mediastorm-compositing-tracking）、去背/遮罩、調色或故事順序。

需確立的輸入

• 資訊任務：觀眾應該注意到、閱讀或理解什麼？
• 開始/結束構圖、確切的動作時間以及專案幀速率。
• 目標：區段本地參數、追蹤標籤、數字閃現或計時器。
• 運動是裝飾性還是具有意義；如果是裝飾性，為何需要它。
• 輸出幀速率以及最終運動是否將以正常速度進行判斷。

工作流程

1. 在添加關鍵幀之前，先定義目的和確切的動作時間。推近應有目標構圖，而不只是「讓它變大」。
2. 將關鍵幀值視為區段本地參數。分割或替換素材可能會重設看似共享的參數[課程證據][08 01:00–02:40]。
3. 對於推近，有意識地結合縮放和位置。課程中的手機推近範例結束於縮放 286%、位置 X 0、Y -2219；開始於縮放 100%、位置 0/0。354% 和 214% 這兩個數值是拖曳中的中間值，而非最終預設[取樣截圖][08 05:58.5 / 06:22.5]。
4. 開啟關鍵幀速度曲線面板，檢查所有三條曲線：縮放、位置 X 和位置 Y。面板範圍為縮放 4.00–0.00、X 768–-768、Y 432–-2160；預設為線性[取樣截圖][08 07:59.0 / 08:20.5]。
5. 一致地應用緩動。課程的預設清單為 无 / 缓入 / 二次方缓入 / 三次方缓入 / 缓出 / 二次方缓出 / 三次方缓出 / 缓动 / 二次方缓动 / 三次方缓动 / 回弹展开 / 线性（無 / 緩入 / 二次方緩入 / 三次方緩入 / 緩出 / 二次方緩出 / 三次方緩出 / 緩動 / 二次方緩動 / 三次方緩動 / 彈出展開 / 線性）。示範為所有三條曲線選擇了二次方緩入[取樣截圖][08 09:18.5]。
6. 對於點追蹤標籤，選擇一個穩定、高對比度且持續可見的特徵。僅啟用標籤應繼承的維度；課程在 08:26 關閉了 缩放/距离（縮放/距離），以便文字僅跟隨位置[取樣截圖][12 08:24–08:26]。
7. 在追蹤之前修剪未使用的片段。追蹤整個片段會浪費計算資源，並使標籤更難控制[課程證據][12 09:19–10:57]。
8. 對於數字閃現，在幀網格上構建簡短的文字區段。課程的設計單位約為每區段 2 幀，但完成的幀網格在第一次運行中顯示 8 個值/15 幀（約 0.50 秒），第二次運行中顯示 6 個值/11 幀（約 0.37 秒），每個值保持 1-3 幀[取樣截圖][12 12:48–14:35]。請勿將「2 幀」重複為字面結果；請驗證完成的網格。
9. 對於計時器/包裝，明確構建其結構：黑底素材、矩形遮罩、圓角半徑、描邊、陰影、不透明度、重複的背景區塊、文字數字、陰影、進場動畫和偏移階梯。課程計時器使用 538×540 遮罩、半徑 27、白色描邊 2、陰影 100/19/0/0、圖片不透明度 45%、文字大小 15、文字縮放 134%、文字陰影 45/16/0/0[取樣截圖][15 16:30–19:47]。
10. 配對進場和出場動畫，風格和位置保持一致，僅在包裝有益時才允許輕微重疊。課程配對了向上的出場/進場，面板設定約為 0.4s；預覽中的可見重疊約為 5 幀（約 0.17 秒）[取樣截圖][12 14:35–17:29]。
11. 檢查遮擋、安全區域、可讀性、相鄰動畫，以及是否有轉場或疊加層導致測試目標不純淨。
12. 在實際播放器中以正常速度驗證。靜止幀無法證明緩動感覺、數字可讀性或追蹤穩定性。

決策規則

• 如果運動沒有資訊任務，請移除它；「看起來有動感」不是一個任務。
• 如果縮放和位置同時動畫，請對齊它們的開始/結束時間並檢查兩條曲線；僅縮放緩動搭配線性位置移動會讀起來像兩個事件。
• 如果關鍵幀標記在區段上看起來是實心的，仍須檢查參數行；課程的 06:22.5 視圖顯示一個空心的縮放菱形和一個實心的位置菱形，這是一個需要驗證的衝突，而非預設[待驗證]。
• 對於追蹤標籤，僅位置是預設；僅在標籤需要繼承深度時才添加縮放/距離。
• 對於數字閃現，使用整數幀運算，並將最終值保持足夠長以供閱讀。
• 如果計時器/包裝使用了預設，請記錄該預設和專案幀速率；以其他尺寸儲存的預設可能無法適用。
• 如果運動效果僅在代理預覽中可見，請勿批准；請檢查介面/輸出。

CapCut 執行備註

• capcut keyframe 支援批次以及 linear/ease-in/ease-out/ease-in-out/hold；緩動需要相同屬性的相鄰關鍵幀，而 hold 則需要一個後續關鍵幀。
• 在先前驗證過的 macOS 路徑上，Alpha 關鍵幀不是一個可靠的淡入淡出機制；請在適當情況下使用動畫素材或 image-anim。
• add-text、image-anim 和 text-anim 有 CLI 契約，但視覺結果仍需 CapCut 接受。
• 對於追蹤標籤，課程使用文字/追蹤面板；請勿假設 CLI 關鍵幀等同於 CapCut 的追蹤解算器。

Remotion / TypeScript 適配器

• 使用 interpolate + Easing.bezier/Easing.spring 驅動數值；讀取 useCurrentFrame() 和 useVideoConfig().fps。
• 使用 @remotion/shapes 繪製矩形/圓形/星形，@remotion/layout-utils 測量/適應文字，以及 @remotion/motion-blur 製作模糊效果。
• 數字閃現：從 Math.floor(frame / framesPerValue) 推導出當前值，然後在幀網格上保持最終值。
• Remotion 沒有點追蹤面板；將來自外部數據的追蹤座標輸入到轉換中。

失敗條件

• 動作時間未知，關鍵幀憑感覺放置。
• 縮放和位置曲線不匹配。
• 追蹤標籤意外繼承了縮放或透視。
• 數字閃現以毫秒為單位設計，並在編輯過程中產生偏移。
• 最終值保持時間不夠長，無法閱讀。
• 計時器包裝是從預設構建的，但未檢查大小/幀速率。
• 運動是從靜止幀或代理預覽中批准的。

驗收清單

• 運動有陳述明確的資訊任務。
• 已記錄開始/結束構圖和動作時間。
• 縮放/位置曲線已對齊並一致地應用了緩動。
• 追蹤標籤僅使用了預期的維度。
• 數字閃現在幀網格上；最終值保持不變。
• 計時器/包裝的幾何形狀和文字已在目標大小下檢查。
• 已檢查遮擋、安全區域和相鄰動畫。
• 結果已在 CapCut/匯出中以正常速度觀看。

輸出契約

回傳：運動任務、確切的關鍵幀時間、參數值、緩動選擇、追蹤維度、幀網格運算，以及已驗證與待驗證的項目。請勿將課程預設呈現為通用預設。

請參閱 references/motion-design.md 以取得課程衍生模式、失敗檢查和時間碼。