Verwenden Sie CSS Cubic-Bezier für Keyframes in After Effects?

Art von. Das Animationsmodell ist etwas anders, das heißt, Sie haben mehrere Möglichkeiten, das Problem anzugehen. Im Allgemeinen ist es keine gute Idee zu denken: "Hey, ich kenne mich mit CSS aus. Ich werde es genauso angehen." Das macht Sie auf Dauer extrem ineffizient.

Der erste Ansatz besteht darin, einfach den Diagrammeditor zu verwenden, den Modus auf Wertegriffe einzustellen und dann Ihre Griffe zu ziehen. Nur funktioniert dies nicht wirklich gut für Positionsanimationen (außer in Fällen, in denen Sie sich orthogonal bewegen), da Sie 3 Griffe anpassen müssten und sicherzustellen, dass Sie es in verschiedenen Maßstäben auf die gleiche Weise tun, funktioniert nicht allzu gut. Zweitens können Sie nicht über Ihre Keyframe-Werte hinausgehen, wie es CSS Ihnen ermöglicht.

Die zweite Option besteht darin, Ihre Animation vorzukomponieren und den Quellframe für Time Warp-Effekte zu keyen. Auch hier können Sie nicht über Werte hinausgehen.

Die dritte Möglichkeit besteht darin, einen eigenen Interpolator zu schreiben.

Es gibt ein Plugin namens FLOW in AE-Skripten, Sie können Ihr kubisches Bezier kopieren und dort ablegen.

https://aescripts.com/flow/

Ich habe mir etwas Zeit genommen, um mehr über Kubik-Bezier-Kurven zu lernen und wie man sie liest, weil mir aufgefallen ist, dass viele Markendesignsysteme Kubik-Bezier-Kurvenwerte und After Effects-Velocity-Werte in ihrem Abschnitt mit Motion-Design-Spezifikationen enthalten. Ich wollte unbedingt die Beziehung zwischen den beiden verstehen und lernen, wie man die kubischen Bezier-Werte in AE-Werte übersetzt. Hier ist, was ich bisher gelernt habe.

Die x1- und x2-Koordinaten (horizontal) werden in die Velocity-Einflusswerte von After Effects übertragen. Die Koordinaten y1 und y2 (vertikal) werden in die Werte Pixel/Sekunde (Geschwindigkeit) übersetzt. Es ist leicht, das Muster der Velocity-Werte zu erkennen, sobald Sie verstanden haben, wie man es übersetzt.

Für Ihr Beispiel bedeutet also kubisches Bezier (0,65, 0, 0,35, 1) Folgendes:

• x1: 0,65 = Ausgangsgeschwindigkeit 65 % Einflusswert
• x2: 0,35 = Eingangsgeschwindigkeit 65 % Einflusswert

Jetzt verstehe ich nicht ganz, wie der Parameter "Pixel/Sekunde" funktioniert, also überlasse ich das jemand anderem, der eintaucht und erklärt, da ich auch etwas Hilfe brauche, um ihn zu verstehen. Aber im Wesentlichen liest die X-Achse von links nach rechts, beginnend bei 0 und endend bei 1, ausgehende Griffe ziehen von links und eingehende Griffe ziehen von rechts. ich hoffe das hilft

Verwenden Sie Animation Composer 3 für After Effects. Es enthält alle Kurvenvorgaben:

https://misterhorse.com/animation-composer

Ja, das können Sie, es wird etwas mehr Arbeit erfordern, es zu den Keyframes hinzuzufügen, aber es würde in etwa so aussehen:

@keyframes ae-to-css {
  0% {
    animation-timing-function:ease-out;
  }
  23% {
    animation-timing-function:ease-in;
  }
  50% {
    animation-timing-function:cubic-bezier(.5,0,.5,1.5);
  }
  76% {
    animation-timing-function:cubic-bezier(0,0,0,1);
  }
  100% {
  }
} 

Hier ist ein guter Artikel über den Übergang von CSS zu AfterEffects.