So invertieren Sie die Implementierung einer Bézierkurve in CSS

Schauen wir uns zunächst einen CSS-Karussell-Animationseffekt an, den ich zuvor geschrieben habe. Um den Übergang der Animation flüssiger zu gestalten, habe ich nicht die verschiedenen von CSS bereitgestellten Schlüsselwörter im Attribut „animation-timing-function“ verwendet, sondern die Funktion „cubic-bezier“.

Bessel-Funktionen können zunächst verwirrend erscheinen, bei richtiger Verwendung können sie jedoch das Benutzererlebnis von Animationen verbessern.

Beim Erstellen dieses Karussells ist mir aufgefallen, dass beim Hinzufügen der sichtbaren Bézier-Funktion zu einer Seite die versteckte Bézier-Funktion der vorherigen Seite umgekehrt wurde. Ich dachte, es wäre lohnenswert, diesen Beitrag zu teilen, da das Erstellen und Umkehren einer Bézierkurve zwar schwierig erscheinen mag, aber eigentlich ziemlich einfach ist.

Verstehen Sie die Grundlagen des Easing

Zunächst einmal wird mit dem Wort Easing der Beschleunigungs- und Verzögerungsrhythmus der Elementanimation auf der Zeitleiste beschrieben. Wir können dies als Diagramm darstellen, wobei die X-Achse die Zeit und die Y-Achse den Fortschritt der Animation darstellt. Linear ist eine Grafik ohne Beschleunigung oder Verzögerung (Bewegung immer mit der gleichen Geschwindigkeit), die durch eine gerade Linie in der Grafik dargestellt wird:

Durch nichtlineares Easing wird die Animation natürlicher und realistischer. Wir können in CSS verschiedene Easing-Eigenschaften auf Übergänge und Animationen anwenden. Wir können diese Werte auf die Eigenschaften „transition-timing-function“ oder „animation-timing-function“ setzen. Es können fünf Schlüsselwörter festgelegt werden:

• linear – Bereits oben vorgestellt
• Ease-In – Die Animation beginnt langsam und wird im Verlauf schneller.
• ease-out – Die Animation startet schnell und wird am Ende langsamer.
• ease-in-out – Die Animation beginnt langsam, wird in der Mitte schneller und am Ende langsamer.
• ease – Der Standardwert, der das Gegenteil des Ease-In-Out-Animationsprozesses ist.

Kubische Bézier-Mechanik verstehen

Wenn keiner der oben beschriebenen Schlüsselwortwerte für unsere Animation geeignet ist, können wir mit der kubischen Bézier-Funktion eine benutzerdefinierte Kurve erstellen. Hier ist ein Beispiel:

.mein-element {
  Animationsname: Folie;
  Animationsdauer: 3s;
  Animations-Timing-Funktion: kubische Bézierkurve (0,45, 0,25, 0,60, 0,95);
}

Wir können diese Eigenschaften wie folgt zu einer einzigen zusammenfassen:

.mein-element {
  Animation: Folie 3 s, kubisch-bézier (0,45, 0,25, 0,60, 0,95);
}

Sie werden feststellen, dass die kubische Bézierfunktion vier Werte hat. Diese vier Werte sind die beiden Koordinatenpaare, die zum Zeichnen der Kurve benötigt werden. Was bedeuten diese Koordinaten? Wenn Sie Illustrator verwendet haben, sind Sie mit den Vektorpunkten vertraut, die die Größe und Richtung einer Kurve steuern. Dies sind die Punkte, die wir benötigen, um mit der kubischen Bézier-Funktion eine Kurve zu zeichnen.

Wir müssen nicht die gesamte Mathematik hinter Bézierkurven kennen. Weil einige große Entwickler praktische Tools für uns erstellt haben, wie beispielsweise cubic-bezier.com von LeaVerou, wo wir visuell eine Bézierkurve erstellen und ihre Koordinatenpunktwerte kopieren können. Die Bézierkurve für meinen Karusselleffekt wurde mit diesem Werkzeug erstellt und sieht folgendermaßen aus:

Hier sehen wir die beiden Punkte, die wir brauchen: cubic-bezier(x1, y1, x2, y2).

Wenden Sie Easing sowohl in Vorwärts- als auch in Rückwärtsrichtung an

Beim obigen Karussell wird eine Animation in beide Richtungen angewendet – wenn auf den linken Pfeil geklickt wird, gleitet das aktuelle Element nach rechts aus dem Blickfeld, während das nächste Element nach links hineingleitet; wenn auf den rechten Pfeil geklickt wird, geschieht das Gegenteil. Meine erste Annahme war, dass ich die Animation einfach umkehren könnte, sodass die Elemente in die entgegengesetzte Richtung herausgleiten, etwa so:

.mein-element--reversed {
  Animation: Folie 3 s kubisch-bézier (0,45, 0,25, 0,60, 0,95) rückwärts;
}

Hier gibt es jedoch ein Problem: Wenn Sie der Animation eine Umkehrung hinzufügen, wird auch die Easing-Kurve umgekehrt! Jetzt sieht meine Animation in eine Richtung gut aus, in die entgegengesetzte Richtung jedoch falsch.

In der folgenden Demonstration zeigt das erste Feld die Animation in positiver Richtung und das zweite Feld zeigt, was passiert, nachdem die Umkehrung hinzugefügt wurde.

Sie können sehen, dass die Wirkung dieser beiden Animationen völlig unterschiedlich ist. Die erste Box beschleunigt zu Beginn und wird im Verlauf der Animation langsam langsamer, während die zweite Box recht langsam beginnt, dann beschleunigt und schließlich stoppt.

Wir können dieses Problem auf zwei Arten lösen:

• Erstellen Sie eine neue Keyframe-Animation, um die Animation anzuzeigen, und stellen Sie sie auf dasselbe Easing ein. Dies ist für einfache Animationen in Ordnung, aber was ist, wenn Sie auf komplexe Animationen stoßen? Das Erstellen der Rückwärtsanimation erfordert mehr Arbeit und ist fehleranfällig.
• Wir können dieselbe Keyframe-Animation verwenden (und die Animationsrichtung auf „umkehren“ einstellen) und die Bézierkurve umkehren, um so in beiden Richtungen denselben Easing-Effekt zu erzielen. Diese Methode ist nicht schwierig.

Das Umkehren der Bézierkurve entspricht einer Drehung der gesamten Figur um 180 Grad auf der Koordinatenachse:

Die umgekehrten Punktkoordinaten können durch einfache mathematische Berechnungen ermittelt werden: Vertauschen Sie die beiden Koordinatenpunkte und subtrahieren Sie von jedem Wert 1.

Beispielsweise lauten die Koordinaten in positiver Richtung: x1, y1, x2, y2

Die Koordinaten in der entgegengesetzten Richtung erhält man dann mit der folgenden Formel: (1 - x2), (1 - y2), (1 - x1), (1 - y1)

In der Demo unten stellt das dritte Feld den gewünschten Effekt dar: Das Element gleitet in die entgegengesetzte Richtung, hat aber die gleiche Animationskurve wie die positive Richtung.

Sehen wir uns an, wie die umgekehrte Bézierkurve berechnet wird.

Verwenden von benutzerdefinierten CSS-Eigenschaften zum Berechnen von Rückwärtskurven

Wir können benutzerdefinierte CSS-Eigenschaften verwenden, um neue Kurven zu berechnen! Weisen Sie zunächst jedem Wert eine Variable zu:

:Wurzel {
  --x1: 0,45;
  --y1: 0,25;
  --x2: 0,6;
  --y2: 0,95;
  
  --originalCurve: kubische Bézierkurve (var(--x1), var(--y1), var(--x2), var(--y2));
}

Mit diesen Variablen können wir dann neue Werte berechnen:

:Wurzel {
  --reversedCurve: kubische-bezier(calc(1 - var(--x2)), calc(1 - var(--y2)), calc(1 - var(--x1)), calc(1 - var(--y1)));
}

Wenn wir jetzt Änderungen am ersten Variablensatz vornehmen, werden die umgekehrten Kurvenpunkte automatisch berechnet. Um Probleme beim Überprüfen und Debuggen meines Codes leichter erkennen zu können, weise ich diese neuen Werte gerne ihren eigenen Variablen zu:

:Wurzel {
  /* Originalwert weiterleiten */
  --x1: 0,45;
  --y1: 0,25;
  --x2: 0,6;
  --y2: 0,95;
  
  --originalCurve: kubische Bézierkurve (var(--x1), var(--y1), var(--x2), var(--y2));
  
  /* Umgekehrter Berechnungswert */
  --x1-r: berechnet (1 - var (--x2));
  : --y1-r: berechnet (1 - var (--y2));
  --x2-r: berechnet (1 - var (--x1));
  : --y2-r: berechnet (1 - var (--y1));
  
  --reversedCurve: kubische Bézierkurve (var(--x1-r), var(--y1-r), var(--x2-r), var(--y2-r));
}

Jetzt muss nur noch die neue Kurve auf die inverse Animation angewendet werden:

.mein-element--reversed {
  Animation: Folie 3 s var(--reversedCurve) umkehren;
}

Um dies intuitiver und visueller zu gestalten, habe ich ein kleines Tool zur Berechnung des Kehrwerts einer Bézierkurve erstellt. Geben Sie die ursprünglichen Koordinatenwerte ein, um automatisch den umgekehrten Kurvenwert zu erhalten: Umgekehrtes kubisches Bézier-Werkzeug

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.