AE GSAP Motion Translation

Was macht AE GSAP Motion Translation?

Verwenden Sie dies nach skills/AEMotion/SKILL.md für After Effects-Arbeiten, die von der GreenSock/GSAP-Bewegungsgrammatik profitieren. GSAP selbst läuft nicht in AE. Übersetzen Sie seine Konzepte in AE-native Keyframes, Ausdrücke, Controller-Nulls, Text-Animatoren, Zeit-Remapping, Masken, Kameras und Skripte.

Offizielle Quell-Skills, die lokal installiert sind (passen Sie den Pfad an, wenn Ihre Codex-Skills woanders liegen):

• $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

Lesen Sie nur den relevanten offiziellen GSAP-Skill, wenn die genaue Semantik wichtig ist. Halten Sie AE-Skripte ES3-sicher, wie von AEMotion gefordert.

Kernübersetzung

GSAP-Idee	AE-Übersetzung
gsap.to(target, vars)	Aktuellen Wert als Start beibehalten; End-Keyframe bei start + dauer setzen.
gsap.from(target, vars)	Einen expliziten Start-Keyframe aus vars setzen; zum aktuellen/endgültigen Designwert animieren. Vermeiden Sie unerwünschtes "immediateRender", indem Sie später festgelegte Zustände nicht überschreiben.
gsap.fromTo(target, from, to)	Sowohl Start- als auch End-Keyframes explizit setzen. Am besten für zuverlässige, skriptgesteuerte AE-Bauten.
gsap.set(target, vars)	Wert zur aktuellen Zeit setzen oder einen Halte-Keyframe erstellen, falls eine spätere Animation davon abhängt.
duration, delay	Sekunden in Kompositionszeit umrechnen; bei 30fps ist 1 Frame = 1/30.
ease	Zeitliche Erleichterung auf Keyframes anwenden oder Ausdruckskurven verwenden. Das Gefühl treffen, nicht die exakte Browser-Mathematik.
stagger	Layer-/Keyframe-Startzeiten um Frames versetzen; für Text bevorzugen Sie Text-Animator-Selektoren oder zerlegen Sie Text in einzelne Layer.
repeat / yoyo	Schleifenausdrücke, Zeit-Remapping oder duplizierte Keyframe-Zyklen verwenden. Bei fragilen Ausdrücken lieber einbrennen.
autoAlpha	Deckkraft-Keyframes; optional den Layer außerhalb sichtbarer Bereiche nur für harte Schnitte deaktivieren/aktivieren.
Relative Werte +=, -=	Aktuelle AE-Eigenschaft auslesen und Delta hinzufügen, bevor der neue Keyframe geschrieben wird.
Funktionsbasierte Werte	Indexbasierte Berechnungen in JSX oder Ausdrucksselektoren verwenden.
gsap.defaults()	Gemeinsames Konfigurationsobjekt in JSX oder Controller-Null mit Schiebereglern für Dauer/Erleichterung/Streuung.
matchMedia() / reduzierte Bewegung	Alternative Skalierungs-/Schieberegler-Voreinstellungen wie Bewegungsstärke erstellen; für reduzierte Bewegung kürzere Distanz, geringere Rotation oder nur Deckkraft verwenden.

Zeitachsen-Grammatik

Bevor Sie AE-Keyframes erstellen, schreiben Sie eine kompakte Zeitachsen-Spezifikation:

label intro @ 0.00
S06_Card_Demo.fromTo position [x0,y0,z0] -> [x1,y1,z1] dauer .55 ease power3.out @ intro
S06_Card02.to scale 70 -> 100 dauer .35 ease back.out @ <+.08
cards.stagger orientation += [0,18,-8] dauer .6 ease power2.inOut each .04 from center

Übersetzen Sie sie dann in eine AE-Tabelle:

Feld	Bedeutung
layer	Exakter AE-Layername oder -Muster.
property	AE-Eigenschaftspfad: Position, Skalierung, Ausrichtung, Deckkraft, Maskenpfad, Zeit-Remapping usw.
from/to	Explizite Werte in AE-Einheiten.
start/dauer	Sekunden oder Frames.
ease	GSAP-ähnlicher Name, der auf AE-zeitliche Erleichterung abgebildet wird.
offset	Absolute Zeit, Beschriftung, vorheriger Start <, vorheriges Ende >, oder Stagger-Offset.
controller	Optionale Null/Schieberegler, die die Werte steuern sollen.

Bevorzugen Sie Zeitachsen-Beschriftungen gegenüber verstreuter Verzögerungs-Mathematik. Erstellen Sie für komplexe Abschnitte einen Controller-Null pro Sequenz, z.B. CTRL_S06_KARTEN, mit Schiebereglern wie Bewegungsstärke, Stagger-Frames, Tiefenstreuung und Fortschritt.

Erleichterungs-Zuordnung

Verwenden Sie diese als Ausgangspunkte und passen Sie sie visuell mit Aufnahmen an:

GSAP-Erleichterung	AE-Gefühl
none	Lineare Interpolation. Verwenden Sie für Scrub-/fortschrittsgesteuerte Bewegung.
power1.out	Sanftes Auslaufen; geringer Einfluss.
power2.out	Standard-UI-Auslaufen.
power3.out	Schneller Start, starkes Einlaufen; gut für Karten und Titel.
power3.inOut	Symmetrische, gleichmäßige Bewegung; gut für Kamera- oder Gruppenbewegungen.
expo.out	Sehr schnelle Ankunft, dann langsames Einlaufen; sparsam verwenden.
back.out(1.7)	Überschwing-Keyframe über das Ende hinaus hinzufügen, dann einlaufen.
elastic.out()	Federausdruck oder 3-5 abklingende Überschwing-Keyframes verwenden.
bounce.out	Gestufte Aufprall-Keyframes verwenden; nicht mit einer einfachen Erleichterung vortäuschen.

Wenn die genaue Zeitgebung wichtig ist, nehmen Sie Frames um die Spitzengeschwindigkeit und den Landezeitpunkt auf. Die Keyframe-Interpolation von AE wird numerisch nicht identisch mit GSAP sein; das Ergebnis ist eine übereinstimmende Bewegungs-Wahrnehmung.

ScrollTrigger-Konzepte in AE

AE hat kein DOM-Scrollen. Übersetzen Sie ScrollTrigger als Fortschritts-Treiber:

ScrollTrigger-Idee	AE-Muster
trigger/start/end	Zeitachsen-Beschriftungsbereich oder Arbeitsbereich.
scrub: true	Schieberegler/Null Fortschritt 0..100, Zeit-Remapping oder Ausdruck, der Zeit auf Fortschritt abbildet. Lineare Erleichterung verwenden.
numerische scrub-Verzögerung	Tiefpass-/Federausdruck auf den Fortschrittswert oder verzögerte duplizierte Keyframes.
pin	Kamera oder übergeordnete Null halten, während Unterelemente animiert werden. Das angeheftete übergeordnete Element nicht animieren, wenn Unterelemente unabhängige Bewegung benötigen.
snap	Halte-/Sprung-Keyframes oder Math.round(fortschritt / schritt) * schritt-Ausdruck.
markers	Temporäre Führungslayer, Beschriftungen oder Textüberlagerungen; vor der endgültigen Abgabe entfernen.
containerAnimation	Horizontales/3D-Karussell, gesteuert von einer Haupt-Null oder einem Kamerapfad; verschachtelte Elemente referenzieren denselben Fortschritt.

Für AE-„scrollähnliche“ Spulen treiben Sie eine Hauptzeitachse mit CTRL_FORTSCHRITT an und bilden Sie den Fortschritt auf Karten, Kamera-Z, Deckkraft und Unschärfe ab. Halten Sie die fortschrittssteuernde Bewegung linear; setzen Sie Erleichterung nur auf die verschachtelten visuellen Reaktionen, wenn es das Erscheinungsbild verbessert.

Plugin-Muster-Entsprechungen

GSAP-Plugin	AE-Entsprechung
Flip	Erste und letzte Layer-Transformationen aufzeichnen; durch inversen Offset oder übergeordnete Nulls animieren. Verwenden Sie für Layout-Neuanordnungen und Kartentausche.
Draggable / Observer	AE-Rendering ist nicht interaktiv; stellen Sie Gesten mit Controller-Schiebereglern oder aufgezeichneten Keyframes dar.
Inertia	Geschwindigkeitsbasierten Ausdruck, Federausdruck oder abklingende Überschwing-Keyframes verwenden.
SplitText	AE-Text-Animatoren, Ausdrucks-Selektoren oder Text in Wort-/Zeichen-Layer zerlegen.
ScrambleText	Quelltext-Halte-Keyframes, Zeichenzuordnungs-Ausdruck oder Text-Animator-Deckkraft/Zeichen-Offset.
DrawSVG	Formebene-Trimmpfade.
MorphSVG	Masken-/Pfad-Keyframes oder Formpfad-Interpolation; sicherstellen, dass die Anzahl und Reihenfolge der Eckpunkte übereinstimmen.
MotionPath	AE-Maskenpfad + Layer-Pfad-Elternschaft oder abgetastete Positions-Keyframes entlang einer Bezier-Kurve.
CustomEase / CustomWiggle / CustomBounce	AE-Grapheneditor-Kurven, zeitliche Erleichterungswerte oder benutzerdefinierte Ausdrucksfunktionen.
GSDevTools	Temporäre Controller-Nulls, Führungslayer, Frame-Aufnahmen und Audit-JSX-Berichte.

Hilfsfunktions-Entsprechungen

Verwenden Sie GSAP-Utils als mathematisches Vokabular in JSX/Ausdrücken:

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(schritt, v) { return Math.round(v / schritt) * schritt; }

Häufige AE-Verwendungen:

• normalize/mapRange: Zeit, Audio-Amplitude oder Schieberegler-Fortschritt auf Position/Skalierung/Deckkraft abbilden.
• random: Deterministische, pro-Layer-Offsets in JSX generieren; vermeiden Sie nicht-deterministische Ausdrucks-Zufälligkeit, es sei denn, das Zittern ist beabsichtigt.
• snap: Gestufte Schreibmaschine, framesprungartige Bewegung, Raster-/Karten-Einschnappen.
• distribute: Kartenfächer, Text-Stagger, von der Mitte nach außen Enthüllungen.

Leistungsregeln für AE

• Bevorzugen Sie Transformationen, Deckkraft, Zeit-Remapping und Kamera-/Null-Bewegung gegenüber schweren Frame-für-Frame-Effekten.
• Vermeiden Sie viele Layer mit teuren Effekten, die alle gleichzeitig animieren; komponieren Sie vor oder brennen Sie ein, wenn das Aussehen genehmigt ist.
• Verwenden Sie Ausdrücke zur Steuerung und Iteration; brennen Sie auf Keyframes ein, wenn der Ausdruck langsam oder zerbrechlich wird.
• Bewegungsunschärfe verbessert die wahrgenommene Qualität, kann aber Layout-Fehler verbergen; überprüfen Sie sowohl mit als auch ohne, wenn Sie diagnostizieren.
• Verwenden Sie für wiederholte Karten übergeordnete Nulls und gemeinsame Controller anstatt jede Eigenschaft unabhängig zu keyframen.
• Halten Sie Masken und Netzverformungen so einfach wie das Visuelle erlaubt. Erfassen Sie genaue Frames nach dem Ändern von Masken.

AE-Build-Workflow

1. Lesen Sie AEMotion und den relevanten offiziellen GSAP-Skill, wenn der Benutzer ein GSAP-Konzept nennt.
2. Überprüfen Sie die AE-Komposition/Layer vor der Bearbeitung. Leiten Sie keine Layernamen ab.
3. Verfassen Sie eine GSAP-artige Zeitachsen-Spezifikation mit Beschriftungen, Dauer, Erleichterung, Stagger und Ziel-Layern.
4. Konvertieren Sie sie in eine AE-Implementierungstabelle.
5. Schreiben Sie ES3-sichere JSX-Helfer für Keyframes/Erleichterung/Controller.
6. Wenden Sie eine logische Sequenz pro Skript an.
7. Erfassen Sie genaue Frames um Start, Spitzengeschwindigkeit, Landung und endgültigen Haltepunkt.
8. Passen Sie Werte basierend auf visuellen Beweisen an, dann speichern.

Nicht tun

• Keinen GSAP-Browsercode in AE einfügen.
• Keine moderne JavaScript-Syntax in ExtendScript verwenden.
• Nicht dieselbe AE-Eigenschaft in mehreren unzusammenhängenden Rigs animieren, ohne Überschneidungen zu prüfen.
• Sich nicht auf delay-artige verstreute Zeitgebung für komplexe Abschnitte verlassen; Beschriftungen/Controller-Zeitgebung verwenden.
• Keine temporären Führungs-/Markierungslayer in endgültigen Renderings sichtbar lassen, es sei denn, der Benutzer hat danach gefragt.