Communitygithub.com

vidmoat/layered-motion

圖層式動態圖像(組合),類似 After Effects 風格,可事後編輯。適用於下三分之一標題、動畫標題、動態文字、統計數字揭示、標誌動畫及標註,且該圖像可能需手動調整時間或樣式,或已存在於時間軸上的組合。

layered-motion 是什麼?

此技能允許 AI 代理建立「組合」(compositions),這是一種由獨立圖層組成的動態圖像,每個圖層的屬性都帶有各自的關鍵影格,最終使用者可在組合面板中開啟並直接編輯。這與一次性、不需編輯的動態圖像元件(可使用 motion component 或 HTML 元素)不同;後者可透過「convertToComposition」指令轉換為圖層。技能支援的代理平台包括 Claude Code 等透過 MCP 或 searchCatalogue 操作的環境。工作流程從查閱組合協定(compositions)與指令(editComposition)開始,然後使用「addComposition」以組合像素為單位建立圖層,並為每個圖層命名(如「Name」、「Role」)。接著為每個屬性逐一加入關鍵影格,並使用適當的緩動函數(例如進場用 easeOutCubic、出場用 easeInCubic),關鍵影格的緩動控制「進入」該影格的運動。最後,使用「get_project」讀取組合狀態,並在完成前檢視進場、停頓與出場的影格。此技能特別適合需要後續編輯的場景,如下三分之一標題(名稱會變動)、動畫標題(需重新計時)等。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vidmoat/skills/tree/HEAD/skills/vidmoat/layered-motion

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

圖層式動態(組合)

組合是一種由圖層構成的動態圖像,每個圖層的屬性都有各自的關鍵影格,使用者可以在組合面板中開啟組合並直接修改。當圖像很可能需要編輯時(例如名稱會變動的下三分之一標題、需要重新計時的標題),請建立組合。對於預期無需編輯的一次性圖像,使用動態元件或 HTML 元素即可;convertToComposition 可將動態元件或 TSX 元件轉換為圖層,以便後續編輯。

工作流程

  1. 查閱資訊: 搜尋功能,類型 workflows,ID compositions 以取得協定;並使用 get_command_schema(MCP)或 searchCatalogue(類型 commands,ID editComposition)取得每個操作。
  2. 從小處著手: 使用 addComposition 建立組合,並加入所需圖層,尺寸以組合像素為單位。為每個圖層命名,使其代表圖層內容(例如「Name」、「Role」、「Bar」):使用者可在面板中閱讀這些名稱,表達式也可透過名稱尋找圖層。
  3. 使用關鍵影格製作動畫: 一次為一個屬性加入關鍵影格。關鍵影格的緩動會影響「進入」該影格的運動。進場使用 easeOutCubic 緩出,出場使用 easeInCubic 緩入,進場時間控制在 0.4 到 0.6 秒之間。
  4. 讀取組合狀態(get_project:clips[].composition):在每次編輯前讀取,以確保操作使用正確的圖層、動畫器、路徑和效果 ID。
  5. 檢視影格: 檢查進場、停頓和出場的影格,確認完成。

不同效果選用哪種工具

  • 文字逐字出現: 使用文字動畫器(text animator),而非對多個文字圖層設定關鍵影格。textPreset 中的 typewriter 適用於程式碼或朗讀的字幕,wordPop 適用於強而有力的鉤子,lineRise 適用於平靜的標題,fadeByChar 適用於優雅的揭示。若無合適預設,可使用 setAnimator 自行撰寫(設定單位、形狀、範圍)。
  • 形狀的擦拭或揭示: 對遮罩的寬度或點設定關鍵影格;或使用軌道遮罩(track matte),當揭示跟隨另一個圖層的形狀時使用。
  • 自行描繪的線條(底線、圍繞文字的圓圈、箭頭):使用帶有描邊和修剪路徑(trim paths)的形狀圖層,將 trimEnd 從 0 到 100 設定關鍵影格。圓形端點看起來像手繪,平頭端點則像切割。
  • 形狀變形成另一個形狀: 對路徑的點設定關鍵影格;每個關鍵影格必須有相同數量的點。
  • 持續運動的效果(輕微浮動、脈衝):使用表達式(value + wiggle(1, 6) 或 loopOut("pingpong")),而非設定數十個關鍵影格。保持 wiggle 幅度小:幾個像素看起來有生命力,數十個像素則像故障。
  • 一個圖層跟隨另一個圖層: 使用表達式讀取它(layer("Bar").x),這樣後續編輯主圖層時,跟隨圖層會自動更新。
  • 深度與收尾: 使用效果堆疊(投影、發光、描邊、顏色或漸層填色、模糊)。每個圖像最多一個陰影,柔和且低透明度;發光僅用於淺色背景上的深色內容。
  • 重複或可重複使用的區塊(例如使用了三次的名牌):預先組合(precompose)該區塊,然後三次放置該預組合,每次使用不同的時間偏移。

下三分之一標題的圖層範例

  1. 一個長條(矩形,品牌色),帶有矩形遮罩,其寬度在 0.5 秒內從 0 關鍵影格到全寬,使用 easeOutCubic。
  2. 名稱(文字,粗體)位於長條上方,使用 textPreset lineRise,延遲 0.15 秒開始;職稱(文字,較輕、較小)再延遲 0.1 秒,使用 fadeByChar。
  3. 停留至少 2.5 秒;出場時將群組的不透明度或長條遮罩寬度在 0.3 秒內關鍵影格回 0,使用 easeInCubic。
  4. 放置於下方安全區域,避開字幕。

注意事項

  • 對已設關鍵影格的屬性使用 setProps 時,需指定 time:它會在那個時間設定關鍵影格。若未指定 time 則會被拒絕(因為基礎值不會顯示)。
  • 鎖定的圖層會拒絕所有編輯,直到 setLayer { locked: false }。
  • 軌道遮罩使用其正上方的圖層;重新排序會改變配對關係。
  • 表達式是一種小型語言:名稱 time、value、index、duration 以及列出的函數。使用其他內容會被拒絕,並列出可用函數。
  • Trim 和描邊作用於形狀的描邊,而非填色。

相關技能:motion-graphics, titles, text-led-video。專家領域:motion-designer。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

相關技能