AE GSAP モーション翻訳 は何をしますか？
After Effects の作業において、GreenSock/GSAP のモーション文法を活用する場合、skills/AEMotion/SKILL.md の後に使用してください。GSAP 自体は AE では動作しません。その概念を、AE ネイティブのキーフレーム、エクスプレッション、コントローラーヌル、テキストアニメーター、タイムリマップ、マスク、カメラ、スクリプトに変換します。
公式ソーススキルはローカルにインストールされています（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 スキルを参照してください。AE スクリプトは AEMotion で要求される 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) | 現在の時間に値を設定するか、後続のアニメーションが依存する場合はホールドキーフレームを作成します。 |
duration, delay | 秒をコンポ時間に変換します。30fps の場合、1 フレーム = 1/30。 |
ease | キーフレームに時間的イーズを適用するか、エクスプレッションカーブを使用します。厳密なブラウザの計算ではなく、感覚を一致させます。 |
stagger | レイヤー/キーフレームの開始時間をフレーム単位でオフセットします。テキストの場合は、テキストアニメーターセレクターまたは「テキストを分解」を使用します。 |
repeat / yoyo | ループエクスプレッション、タイムリマップ、または複製されたキーフレームサイクルを使用します。エクスプレッションが不安定になった場合はベイク処理します。 |
autoAlpha | 不透明度のキーフレーム。必要に応じて、表示範囲外でのハードカットのためにレイヤーの有効/無効を切り替えます。 |
相対値 +=, -= | 現在の AE プロパティを読み取り、新しいキーを書き込む前に差分を加算します。 |
| 関数ベースの値 | JSX またはエクスプレッションセレクターでインデックスベースの計算を使用します。 |
gsap.defaults() | JSX での共有コンフィグオブジェクト、または duration/ease/spread 用のスライダーを持つコントローラーヌル。 |
matchMedia() / モーション軽減 | 代替のスケール/スライダープリセット（例：「モーション量」）を作成します。モーション軽減には、より短い距離、低い回転、または不透明度のみを使用します。 |
タイムライン文法
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 プロパティパス：位置、スケール、方向、不透明度、マスクパス、タイムリマップなど。 |
| from/to | AE 単位での明示的な値。 |
| start/duration | 秒またはフレーム。 |
| ease | GSAP スタイル名を AE の時間的イーズにマッピングしたもの。 |
| offset | 絶対時間、ラベル、前の開始 <、前の終了 >、またはステガーオフセット。 |
| controller | 値を駆動するオプションのヌル/スライダー。 |
遅延計算を分散させるよりも、タイムラインラベルを優先します。複雑なセクションでは、シーケンスごとに 1 つのコントローラーヌル（例：CTRL_S06_CARDS）を作成し、「モーション量」、「ステガーフレーム」、「奥行きスプレッド」、「進行度」などのスライダーを配置します。
イーズマッピング
これらを開始点として使用し、キャプチャで視覚的に調整します:
| GSAP イーズ | AE の感覚 |
|---|---|
none | 線形補間。スクラブ/プログレス駆動のモーションに使用。 |
power1.out | 緩やかなイーズアウト。低い影響。 |
power2.out | 標準的な UI イーズアウト。 |
power3.out | 速い開始、強い収束。カードやタイトルに最適。 |
power3.inOut | 対称的な滑らかな移動。カメラやグループの動きに最適。 |
expo.out | 非常に速い到着後、ゆっくり収束。控えめに使用。 |
back.out(1.7) | 終点を超えるオーバーシュートキーを追加し、その後収束。 |
elastic.out() | エクスプレッションスプリング、または 3〜5 の減衰オーバーシュートキーを使用。 |
bounce.out | 段階的なインパクトキーを使用。1 つの Easy Ease で偽装しない。 |
正確なタイミングが重要な場合は、ピーク速度と着地の瞬間のフレームをサンプリングします。AE のキーフレーム補間は GSAP と数値的に同一にはなりません。成果物はモーションの知覚を一致させることです。
AE における ScrollTrigger の概念
AE には DOM スクロールはありません。ScrollTrigger を進行度ドライバーとして変換します:
| ScrollTrigger の概念 | AE パターン |
|---|---|
trigger/start/end | タイムラインラベル範囲またはワークエリア範囲。 |
scrub: true | スライダー/ヌル「進行度 0..100」、タイムリマップ、または時間を進行度にマッピングするエクスプレッション。リニアイーズを使用。 |
数値 scrub の遅れ | 進行度の値に対するローパス/スプリングエクスプレッション、または遅延した複製キーフレーム。 |
pin | 子をアニメーション中はカメラまたは親ヌルをホールド。子が独立したモーションを必要とする場合、ピン留めされた親はアニメーションしない。 |
snap | ホールド/スナップキーフレーム、または Math.round(progress / step) * step エクスプレッション。 |
markers | 一時的なガイドレイヤー、ラベル、またはテキストオーバーレイ。最終納品前に削除。 |
containerAnimation | 1 つのマスターヌルまたはカメラパスで制御される水平/3D カルーセル。ネストされた要素は同じ進行度を参照。 |
AE での「スクロール風」リールでは、CTRL_PROGRESS でマスタータイムラインを駆動し、進行度をカード、カメラ Z、不透明度、ブラーにマッピングします。進行度駆動のモーションはリニアに保ち、イーズは視覚的な改善になる場合にのみ、ネストされた視覚応答に適用します。
プラグインパターンの同等物
| GSAP プラグイン | AE の同等物 |
|---|---|
| Flip | 最初と最後のレイヤートランスフォームを記録し、逆オフセットまたは親ヌルでアニメーション。レイアウトの並べ替えやカードスワップに使用。 |
| Draggable / Observer | AE レンダリングはインタラクティブではありません。ジェスチャーはコントローラースライダーまたは記録されたキーフレームで表現。 |
| Inertia | 速度ベースのエクスプレッション、スプリングエクスプレッション、または減衰オーバーシュートキー。 |
| SplitText | AE テキストアニメーター、エクスプレッションセレクター、またはテキストを単語/文字ごとに分解。 |
| ScrambleText | ソーステキストのホールドキー、文字マップエクスプレッション、またはテキストアニメーターの不透明度/文字オフセット。 |
| DrawSVG | シェイプレイヤーのトリムパス。 |
| MorphSVG | マスク/パスキーフレーム、またはシェイプパス補間。頂点数と順序が一致していることを確認。 |
| MotionPath | AE マスクパス＋レイヤーパスペアレンティング、またはベジェに沿ったサンプリング位置キー。 |
| CustomEase / CustomWiggle / CustomBounce | AE グラフエディターカーブ、時間的イーズ値、またはカスタムエクスプレッション関数。 |
| GSDevTools | 一時的なコントロールヌル、ガイドレイヤー、フレームキャプチャ、および監査 JSX レポート。 |
ユーティリティ関数の同等物
GSAP ユーティリティを JSX/エクスプレッションでの数学の語彙として使用:
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 のパフォーマンスルール
- トランスフォーム、不透明度、タイムリマップ、カメラ/ヌルの移動を、負荷の高いフレーム単位のエフェクトよりも優先する。
- 高コストなエフェクトがすべて同時にアニメーションする多数のレイヤーは避け、ルックが承認されたらプリコンポーズまたはベイクする。
- 制御と反復にはエクスプレッションを使用し、エクスプレッションが遅くなったり脆くなったりしたらキーフレームにベイクする。
- モーションブラーは知覚品質を向上させるが、レイアウトのミスを隠す可能性がある。診断時にはありとなしの両方で確認する。
- 繰り返しのカードには、すべてのプロパティを独立してキー設定する代わりに、親ヌルと共有コントローラーを使用する。
- マスクとメッシュワープは、視覚的に許容される限りシンプルに保つ。マスク変更後は正確なフレームをキャプチャする。
AE 構築ワークフロー
- ユーザーが GSAP の概念を指定した場合、
AEMotionと関連する公式 GSAP スキルを読む。 - 編集前に AE コンポ/レイヤーを検査する。レイヤー名を推測しない。
- ラベル、継続時間、イーズ、ステガー、ターゲットレイヤーを含む GSAP スタイルのタイムライン仕様をドラフトする。
- AE 実装テーブルに変換する。
- キーフレーム/イーズ/コントローラー用の ES3 セーフな JSX ヘルパーを記述する。
- スクリプトごとに 1 つの論理シーケンスを適用する。
- 開始、ピーク速度、着地、最終ホールドの正確なフレームをキャプチャする。
- 視覚的なエビデンスから値を調整し、保存する。
やってはいけないこと
- GSAP のブラウザコードを AE に貼り付けない。
- ExtendScript でモダンな JavaScript 構文を使用しない。
- 重複を監査せずに、同じ AE プロパティを複数の無関係なリグでアニメーションしない。
- 複雑なセクションに
delayスタイルの分散タイミングを使用しない。代わりにラベル/コントローラータイミングを使用する。 - ユーザーが要求しない限り、最終レンダリングで一時的なガイド/マーカーレイヤーを表示したままにしない。