AE GSAP 動畫轉譯 是做什麼的？
在進行需要 GreenSock/GSAP 動畫語法的 After Effects 工作時，請在 skills/AEMotion/SKILL.md 之後使用此技能。GSAP 本身無法在 AE 中執行。請將其概念轉換為 AE 原生的關鍵影格、表達式、控制器 Null、文字動畫器、時間重新對映、遮罩、攝影機和腳本。
本地安裝的官方來源技能（如果您的 Codex 技能位於其他位置，請調整根目錄）：
$CODEX_HOME/skills/gsap-core/SKILL.md$CODEX_HOME/skills/gsap-timeline/SKILL.md$CODEX_HOME/skills/gsap-scrolltrigger/SKILL.md$CODEX_HOME/skills/gsap-plugins/SKILL.md$CODEX_HOME/skills/gsap-utils/SKILL.md$CODEX_HOME/skills/gsap-performance/SKILL.md
僅在需要精確語義時，才閱讀相關的官方 GSAP 技能。依照 AEMotion 的要求，確保 AE 腳本符合 ES3 安全規範。
核心轉譯
| GSAP 概念 | AE 轉譯 |
|---|---|
gsap.to(target, vars) | 將當前值保留為起始值；在 start + duration 處設定結束關鍵影格。 |
gsap.from(target, vars) | 從 vars 設定明確的起始關鍵影格；動畫過渡到當前/最終的設計值。避免後續穩定狀態被覆寫而產生非預期的 "immediateRender"。 |
gsap.fromTo(target, from, to) | 明確設定起始和結束關鍵影格。最適合可靠的腳本化 AE 建構。 |
gsap.set(target, vars) | 在當前時間設定數值，或建立一個保持關鍵影格（hold keyframe），以備後續動畫依賴於此。 |
duration、delay | 將秒數轉換為合成時間；對於 30fps，1 個影格 = 1/30。 |
ease | 在關鍵影格上套用時間曲線（Temporal ease），或使用表達式曲線。匹配感覺，而非精確的瀏覽器數學計算。 |
stagger | 按影格偏移圖層/關鍵影格的起始時間；對於文字，偏好使用文字動畫器選擇器（Text Animator Selectors）或分解文字圖層（Decompose Text layers）。 |
repeat / yoyo | 使用循環表達式、時間重新對映或重複的關鍵影格循環。如果表達式變得脆弱，則將其烘焙（Bake）。 |
autoAlpha | 不透明度關鍵影格；對於可視範圍外的硬切，可選擇性地停用/啟用圖層。 |
相對數值 +=、-= | 在寫入新關鍵影格之前，讀取當前 AE 屬性並加上增量。 |
| 基於函數的數值 | 在 JSX 或表達式選擇器中使用基於索引的計算。 |
gsap.defaults() | JSX 中的共享配置物件，或使用帶有持續時間/淡入淡出/擴散的控制項滑桿的控制器 Null。 |
matchMedia() / 減少動畫（reduced motion） | 建立替代的縮放/滑桿預設，例如「動畫量」(Motion Amount)；對於減少動畫，使用較短的距離、較低的旋轉度或僅使用不透明度。 |
時間軸語法
在建立 AE 關鍵影格之前，先撰寫一份精簡的時間軸規格：
label intro @ 0.00
S06_Card_Demo.fromTo position [x0,y0,z0] -> [x1,y1,z1] dur .55 ease power3.out @ intro
S06_Card02.to scale 70 -> 100 dur .35 ease back.out @ <+.08
cards.stagger orientation += [0,18,-8] dur .6 ease power2.inOut each .04 from center
然後將其轉換為 AE 表格：
| 欄位 | 說明 |
|---|---|
| layer | 精確的 AE 圖層名稱或模式。 |
| property | AE 屬性路徑：位置 (Position)、縮放 (Scale)、方向 (Orientation)、不透明度 (Opacity)、遮罩路徑 (Mask Path)、時間重新對映 (Time Remap) 等。 |
| from/to | 以 AE 單位表示的明確數值。 |
| start/duration | 秒數或影格數。 |
| ease | 映射到 AE 時間曲線的 GSAP 風格淡入淡出名稱。 |
| offset | 絕對時間、標籤、上一個起始 <、上一個結束 > 或交錯偏移。 |
| controller | 應該驅動數值的可選 Null 圖層/滑桿。 |
偏好使用時間軸標籤勝過分散的 delay 數學運算。對於複雜區段，為每個序列建立一個控制器 Null，例如 CTRL_S06_CARDS，並附帶如「動畫量」(Motion Amount)、「交錯影格」(Stagger Frames)、「深度擴散」(Depth Spread) 和「進度」(Progress) 等滑桿。
淡入淡出映射
使用以下內容作為起點，並透過捕捉畫面進行視覺調整：
| GSAP 淡入淡出 | AE 感覺 |
|---|---|
none | 線性插值。用於跟隨/進度驅動的動畫。 |
power1.out | 溫和的淡出；影響力低。 |
power2.out | 標準的 UI 淡出。 |
power3.out | 快速開始，強力穩定；適合卡片和標題。 |
power3.inOut | 對稱平滑移動；適合攝影機或群組移動。 |
expo.out | 非常快的到達，然後緩慢穩定；謹慎使用。 |
back.out(1.7) | 在結束點之外添加一個過衝關鍵影格，然後穩定。 |
elastic.out() | 使用表達式彈簧或 3-5 個衰減的過衝關鍵影格。 |
bounce.out | 使用階梯狀撞擊關鍵影格；不要只用一個 Easy Ease 來偽造。 |
當需要精確時機時，在峰值速度和著陸點周圍取樣影格。AE 的關鍵影格插值在數值上不會與 GSAP 完全相同；最終成果是匹配的運動感知。
AE 中的 ScrollTrigger 概念
AE 沒有 DOM 滾動。將 ScrollTrigger 轉譯為進度驅動器：
| ScrollTrigger 概念 | AE 模式 |
|---|---|
trigger/start/end | 時間軸標籤範圍或工作區範圍。 |
scrub: true | 滑桿/Null 圖層的「進度 0..100」(Progress 0..100)、時間重新對映，或將時間映射到進度的表達式。使用線性淡入淡出。 |
數值 scrub 延遲 | 進度值上的低通/彈簧表達式，或延遲的重複關鍵影格。 |
pin | 在動畫子圖層時保持攝影機或父級 Null 圖層靜止。如果子圖層需要獨立運動，不要動畫已固定的父級。 |
snap | 保持/捕捉關鍵影格，或 Math.round(progress / step) * step 表達式。 |
markers | 臨時引導圖層、標籤或文字疊加層；在最終交付前移除。 |
containerAnimation | 由一個主 Null 圖層或攝影機路徑控制的水平/3D 旋轉木馬；嵌套元素參考相同的進度。 |
對於 AE 的「類滾動」短片，使用 CTRL_PROGRESS 驅動主時間軸，並將進度映射到卡片、攝影機 Z 軸、不透明度和模糊。保持驅動進度的運動為線性；僅在能改善外觀時，才將淡入淡出效果應用於嵌套的視覺回應。
插件模式等效
| GSAP 插件 | AE 等效 |
|---|---|
| Flip | 記錄第一個和最後一個圖層的變換；透過反向偏移或父級 Null 圖層進行動畫。用於版面重新排序和卡片交換。 |
| Draggable / Observer | AE 渲染不具互動性；使用控制器滑桿或錄製的關鍵影格來表示手勢。 |
| Inertia | 使用基於速度的表達式、彈簧表達式或衰減的過衝關鍵影格。 |
| SplitText | 使用 AE 文字動畫器 (Text Animators)、表達式選擇器 (Expression Selectors)，或將文字分解為逐詞/逐字元的圖層。 |
| ScrambleText | 來源文字 (Source Text) 保持關鍵影格、字元映射表達式，或文字動畫器的不透明度/字元偏移。 |
| DrawSVG | 形狀圖層的修剪路徑 (Trim Paths)。 |
| MorphSVG | 遮罩/路徑關鍵影格或形狀路徑插值；確保頂點數/順序匹配。 |
| MotionPath | AE 遮罩路徑 + 圖層路徑父子連結，或沿貝茲曲線取樣的位置關鍵影格。 |
| CustomEase / CustomWiggle / CustomBounce | AE 圖表編輯器曲線、時間曲線數值或自訂表達式函數。 |
| GSDevTools | 臨時控制器 Null 圖層、引導圖層、影格捕捉和審計 JSX 報告。 |
實用函數等效
在 JSX/表達式中使用 GSAP 工具作為數學詞彙：
function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
function mapRange(in0, in1, out0, out1, v) {
var p = (v - in0) / (in1 - in0);
return out0 + (out1 - out0) * p;
}
function lerp(a, b, p) { return a + (b - a) * p; }
function snap(step, v) { return Math.round(v / step) * step; }
常見的 AE 用途：
normalize/mapRange：將時間、音訊振幅或滑桿進度映射到位置/縮放/不透明度。random：在 JSX 中產生確定性的每層偏移；除非刻意需要抖動，否則避免在表達式中使用非確定性隨機性。snap：階梯式打字機效果、跳幀運動、網格/卡片捕捉。distribute：卡片扇形展開、文字交錯、中心向外揭示。
AE 的效能規則
- 偏好變換、不透明度、時間重新對映和攝影機/Null 圖層移動，勝過大量的逐幀特效。
- 避免同時動畫許多帶有昂貴特效的圖層；在外觀確認後進行預合成或烘焙。
- 使用表達式進行控制和迭代；當表達式變慢或脆弱時，將其烘焙為關鍵影格。
- 動態模糊能提升感知品質，但可能隱藏版面錯誤；在診斷問題時，應同時在開啟和關閉動態模糊的狀態下進行檢查。
- 對於重複的卡片，使用父級 Null 圖層和共享控制器，而不是獨立地為每個屬性設定關鍵影格。
- 保持遮罩和網格變形盡可能簡單以符合視覺需求。在更改遮罩後捕捉確切影格。
AE 建構工作流程
- 如果使用者提到了 GSAP 概念，請閱讀
AEMotion和相關的官方 GSAP 技能。 - 在編輯前檢查 AE 合成/圖層。不要推斷圖層名稱。
- 起草一份 GSAP 風格的時間軸規格，包含標籤、持續時間、淡入淡出、交錯和目標圖層。
- 轉換為 AE 實作表格。
- 為關鍵影格/淡入淡出/控制器編寫符合 ES3 安全的 JSX 輔助函數。
- 每個腳本應用一個邏輯序列。
- 圍繞起始、峰值速度、著陸點和最終停留點捕捉確切影格。
- 根據視覺證據調整數值，然後儲存。
禁止事項
- 不要將 GSAP 瀏覽器程式碼貼到 AE 中。
- 不要在 ExtendScript 中使用現代 JavaScript 語法。
- 不要在沒有審查重疊的情況下，在多個不相關的裝備中動畫相同的 AE 屬性。
- 對於複雜區段，不要依賴
delay風格的分散時序；請使用標籤/控制器時序。 - 除非使用者要求，否則不要在最終渲染中保留可見的臨時引導圖層/標記圖層。