Im Umgang mit komplexen CSS -Animationen besteht die Tendenz, expansive @Keyframes mit vielen Erklärungen zu erstellen. Es gibt jedoch ein paar Tricks, über die ich sprechen möchte, die dazu beitragen könnte, die Dinge zu erleichtern, während ich in Vanille -CSS bleibt:
Der erste ist weit verbreitet und vertraut, aber der zweite ist weniger verbreitet. Dafür könnte es gute Gründe geben - Animationen mit Kommas sind relativ einfacher als die verschiedenen Zeitfunktionen, die uns zur Verfügung stehen und was sie tun. Es gibt eine besonders ordentliche Timing -Funktion, die uns die vollständige Steuerung bietet, um benutzerdefinierte Zeitfunktionen zu erstellen. Das wäre Cubic-cezier () und in diesem Beitrag werde ich Ihnen die Kraft und darüber zeigen, wie es verwendet werden kann, um eine ausgefallene Animation ohne zu viel Komplexität zu erstellen.
Beginnen wir mit einem grundlegenden Beispiel, das zeigt, wie wir einen Ball in interessante Richtungen bewegen können, wie eine Infinity -Form (∞):
Wie Sie sehen können, gibt es keinen komplexen Code-nur zwei Keyframes und eine Kubik-Bezier () -Funktion. Und doch ist eine ziemlich komplex aussehende endgültige Infinity-Form-Animation das, was wir bekommen.
Cool, richtig? Lassen Sie uns darauf eingraben!
Beginnen wir mit der offiziellen Definition:
Eine kubische Bézier -Lockerungsfunktion ist eine Art von Lockerungsfunktion, die durch vier reelle Zahlen definiert ist, die die beiden Kontrollpunkte P1 und P2 einer kubischen Bézier -Kurve angeben, deren Endpunkte P0 und P3 auf (0, 0) bzw. (1, 1) festgelegt sind. Die X -Koordinaten von P1 und P2 sind auf den Bereich beschränkt [0, 1].
Die obige Kurve definiert, wie sich die Ausgabe (y-Achse) anhand der Zeit (x-Achse) verhalten wird. Jede Achse hat einen Bereich von [0, 1] (oder [0% 100%]). Wenn wir eine Animation haben, die zwei Sekunden (2s) dauert, dann:
0 (0%) = 0s 1 (100%) = 2s
Wenn wir links von 5px auf 20px animieren wollen, dann: dann:
0 (0%) = 5px 1 (100%) = 20px
X, die Zeit, ist immer auf [0 1] beschränkt; Y, die Ausgabe kann jedoch über [0 1] hinausgehen.
Mein Ziel ist es, P1 und P2 anzupassen, um die folgenden Kurven zu erstellen:
Sie denken vielleicht, dass dies unmöglich ist, da P0 und P3, wie in der Definition angegeben, auf (0,0) und (1,1) festgelegt werden, was bedeutet, dass sie nicht auf derselben Achse sein können. Das stimmt, und wir werden einige mathematische Tricks verwenden, um sie zu „approximieren“.
Beginnen wir mit der folgenden Definition: Cubic-Bezier (0,1,5,1,5). Das gibt uns die folgende Kurve:
Unser Ziel ist es, sich zu bewegen (1,1) und es unter (0,1), was technisch nicht möglich ist. Also werden wir versuchen, es zu fälschen.
Wir haben zuvor gesagt, dass unser Bereich [0 1] (oder [0% 100%]) beträgt, also stellen wir uns den Fall vor, wenn 0% nahezu 100% sind. Wenn wir zum Beispiel Top von 20px (0%) auf 20,1px (100%) animieren möchten, können wir sagen, dass sowohl die anfänglichen als auch die endgültigen Zustände gleich sind.
HM, aber unser Element wird sich überhaupt nicht bewegen, oder?
Nun, es wird sich ein wenig bewegen, da der Y -Wert 20,1px (100%) überschreitet. Aber das reicht nicht aus, um uns wahrnehmbare Bewegung zu geben:
Lassen Sie uns die Kurve aktualisieren und stattdessen Cubic-Bezier (0,4,1,4) verwenden. Beachten Sie, wie unsere Kurve viel größer ist als zuvor:
Trotzdem immer noch keine Bewegung - auch wenn der Top -Wert 3 (oder 300%) überquert. Versuchen wir es mit Cubic-Bezier (0,20,1,20):
Ja! Es begann sich ein wenig zu bewegen. Haben Sie die Entwicklung der Kurve jedes Mal bemerkt, wenn wir den Wert erhöhen? Es macht unseren Standpunkt (1,1) „visuell“ näher an (0,1), wenn wir die vollständige Kurve sehen, und dies ist der Trick.
Durch die Verwendung von Cubic-Bezier (0, V, 1, V), wobei V ein sehr großer Wert ist und sowohl die anfänglichen als auch die endgültigen Zustände sehr nahe beieinander sind (oder fast gleich), können wir die parabolische Kurve simulieren.
Ein Beispiel ist mehr als tausend Worte:
Ich habe die Kubikfunktion „Magic“ auf die obere Animation sowie eine lineare aufgebrachte Links angewendet. Dies gibt uns die Kurve, die wir wollen.
Für diejenigen von euch mathematischen Menschen da draußen können wir diese Erklärung weiter nach unten brechen. Ein Kubikbezier kann mit der folgenden Formel definiert werden:
P = (1 - t) ³p0 3 (1 -t) ²tp1 3 (1 -t) T²p2 T³p3
Jeder Punkt ist wie folgt definiert: p0 = (0,0), p1 = (0, v), p2 = (1, v) und p3 = (1,1).
Dies gibt uns die beiden Funktionen für X- und Y -Koordinaten:
V ist unser großer Wert und T liegt im Bereich [0 1]. Wenn wir unser vorheriges Beispiel betrachten, gibt uns Y (t) den Wert von Top, während x (t) der Zeitschritt ist. Die Punkte (x (t), y (t)) definieren dann unsere Kurve.
Finden wir den Maximalwert von y (t). Dafür müssen wir den Wert von T finden, der uns Y '(t) = 0 gibt (wenn das Ableitungsmittel gleich 0 ist):
Y '(t) = 3t² - 6 VT 3V
Y '(t) = 0 ist eine quadratische Gleichung. Ich werde den langweiligen Teil überspringen und Ihnen das Ergebnis geben, nämlich T = V - SQRT (V² - V).
Wenn V ein großer Wert ist, beträgt T gleich 0,5. Y (0,5) = max und x (0,5) entsprechen also 0,5. Das bedeutet, dass wir den Höchstwert an der halben Stelle der Animation erreichen, die der gewünschten parabolischen Kurve entspricht.
Außerdem gibt uns Y (0,5) (1 6 V)/8 und dies ermöglicht uns, den maximalen Wert basierend auf V zu finden. Da wir immer einen großen Wert für V verwenden, können wir 6 V/8 = 0,75 V vereinfachen.
Wir haben im letzten Beispiel V = 500 verwendet, sodass der maximale Wert dort auf 375 (oder 37500%) herausgekommen wäre, und wir erhalten Folgendes:
Es gibt einen Unterschied von -0,5px zwischen 0 und 1.. Nennen wir es das Inkrement . Für 375 (oder 37500%) haben wir eine Gleichung von 375*-0,5px = -187,5px. Unser animiertes Element erreicht oben: 12.5px (200px - 187,5px) und gibt uns die folgende Animation:
Oben: 200px (zu 0% der Zeit) → Oben: 12,5px (zu 50% der Fälle) → Oben: 199,5px (zu 100% der Zeit)
Oder drückte einen anderen Weg aus:
Oben: 200px (bei 0%) → Oben: 12,5px (bei 50%) → Oben: 200px (bei 100%)
Lassen Sie uns die entgegengesetzte Logik machen. Welchen Wert von V sollten wir verwenden, um unser Element an die Spitze zu bringen: 0PX? Die Animation beträgt 200px → 0px → 199,5px, daher benötigen wir -200px, um 0px zu erreichen. Unser Inkrement entspricht immer -0,5px. Der maximale Wert beträgt 200/0,5 = 400, also 0,75 V = 400, was V = 533,33 bedeutet.
Unser Element berührt das Oberteil!
Hier ist eine Figur, die diese Mathematik zusammenfasst, die wir gerade gemacht haben:
Wir werden fast den gleichen Trick verwenden, um eine sinusförmige Kurve zu erstellen, jedoch mit einer anderen Formel. Dieses Mal werden wir Cubic-Bezier (0,5, V, 0,5, -v) verwenden
Lassen Sie uns sehen, wie sich die Kurve entwickelt, wenn wir den Wert erhöhen:
Ich denke, Sie bekommen wahrscheinlich inzwischen die Idee. Wenn wir einen großen Wert für V verwenden, nähern wir uns einer sinusförmigen Kurve.
Hier ist ein anderer mit einer kontinuierlichen Animation - eine echte sinusförmige Animation!
Lassen Sie uns für diesen in die Mathe gehen! Wenn wir dieselbe Formel wie zuvor fungieren, erhalten wir die folgenden Funktionen:
Dieses Mal müssen wir die minimalen und maximalen Werte für y (t) finden. Y '(t) = 0 gibt uns zwei Lösungen. Nach dem Lösen dafür:
Y '(t) = 3 (6v 1) t² - 18 VT 3V = 0
… Wir bekommen:
Für einen großen Wert von V haben wir t '= 0,211 und t "= 0,789. Das bedeutet, dass y (0,211) = max und y (0,789) = min. Das bedeutet auch, dass x (0,211) = 0,26 und x (0,789) = 0,74. Mit anderen Worten, maximal 26% und min bei 74% der Zeit.
Y (0,211) entspricht 0,289 V und Y (0,789) bis -0,289 V. Wir haben diese Werte mit einiger Rundung erhalten, wenn man bedenkt, dass V sehr groß ist.
Unsere sinusförmige Kurve sollte auch die x-Achse (oder y (t) = 0) zur halben Zeit (oder x (t) = 0,5) überqueren. Um dies zu beweisen, verwenden wir das zweite Derivat von y (t) - was gleich 0 - also y '' (t) = 0 sein sollte.
Y '' (t) = 6 (6v 1) t - 18V = 0
Die Lösung beträgt 3 V/(6 V 1) und für einen großen V -Wert beträgt die Lösung 0,5. Das gibt uns y (0,5) = 0 und x (0,5) = 0,5, was bestätigt, dass unsere Kurve den (0,5,0) Punkt überschreitet.
Betrachten wir nun das vorherige Beispiel und versuchen, den Wert von V zu finden, der uns wieder nach oben: 0%bringt. Wir haben:
Wir brauchen -50%, um die Spitze zu erreichen: 0%, also 0,289 V*-0,1% = -50%, was uns V = 1730,10 ergibt.
Wie Sie sehen können, berührt unser Element das Oberteil und verschwindet unten, da wir die folgende Animation haben:
Oben: 50% → Oben: 0% → Oben: 50% → Oben: 100% → Oben: 50% → und so weiter ...
Eine Zahl, um die Berechnung zusammenzufassen:
Und ein Beispiel, um alle Kurven zusammen zu veranschaulichen:
Ja, Sie sehen vier Kurven! Wenn Sie genau hinschauen, werden Sie feststellen, dass ich zwei verschiedene Animationen verwende, von denen einer 49,9% (ein Inkrement von -0,01%) und ein weiterer auf 50,1% (ein Inkrement von 0,01%) beträgt. Durch Ändern des Vorzeichens des Inkrements steuern wir die Richtung der Kurve. Wir können auch die anderen Parameter der Kubikbezier (nicht die V -Eins, die ein großer Wert bleiben) steuern, um mehr Variationen von denselben Kurven zu erzeugen.
Und unten eine interaktive Demo:
Kommen wir zu unserem ersten Beispiel für einen Ball zurück, der sich in Form eines Infinity -Symbols bewegt. Ich habe einfach zwei sinusförmige Animationen kombiniert, damit es funktioniert.
Wenn wir das kombinieren, was wir zuvor mit dem Konzept mehrerer Animationen gemacht haben, können wir erstaunliche Ergebnisse erzielen. Auch hier ist das erste Beispiel, diesmal als interaktive Demo. Ändern Sie die Werte und sehen Sie die Magie:
Gehen wir weiter und fügen Sie der Mischung ein wenig CSS Houdini hinzu. Wir können eine komplexe Transform -Erklärung dank @Property animieren (aber CSS Houdini ist derzeit auf Chrom- und Kantenunterstützung beschränkt).
Welche Art von Zeichnungen können Sie damit machen? Hier sind einige, die ich machen konnte:
Und hier ist eine Spirograph -Animation:
Und eine Version ohne CSS Houdini:
Es gibt ein paar Dinge, die von diesen Beispielen weggenommen werden müssen:
Die gleiche Technik kann auch mit der CSS -Übergangseigenschaft verwendet werden, da sie dieselbe Logik bei den Zeitpunktfunktionen folgt. Dies ist großartig, weil wir Keyframes vermeiden können, wenn wir einen komplexen Schwebebereich -Effekt erzeugen.
Folgendes habe ich ohne Keyframes gemacht:
Mario springt dank der parabolischen Kurve. Wir brauchten überhaupt keine Keyframes, um diese Shake -Animation auf Schwebungen zu erstellen. Die sinusförmige Kurve ist vollkommen in der Lage, alle Arbeiten zu erledigen.
Hier ist eine weitere Version von Mario, diesmal mit CSS Houdini. Und, ja, er springt immer noch dank der Parabolenkurve:
Für ein gutes Maß gibt es hier ausgefallene Schweberffekte ohne Keyframes (wieder nur Chrome und Edge):
Jetzt haben Sie ein paar magische Kubikkurven () und die Mathematik dahinter. Der Vorteil ist natürlich, dass benutzerdefinierte Timing -Funktionen wie diese schicke Animationen ohne die komplexen Keyframes durchführen lassen, nach denen wir im Allgemeinen greifen.
Ich verstehe, dass nicht jeder mathematisch ist und das okay. Es gibt Werkzeuge, mit denen Sie wie Matthew Leins Creaser helfen können, mit denen Sie die Kurvenpunkte umziehen können, um das zu erhalten, was Sie brauchen. Und wenn Sie es noch nicht mit einem Lesezeichen versehen haben, ist Cubic-Bezier.com ein weiterer. Wenn Sie außerhalb der CSS-Welt mit Cubic-Bezier spielen möchten, empfehle ich Desmos, wo Sie einige Mathematikformeln sehen können.
Unabhängig davon, wie Sie Ihre Werte von Cubic-cezier () erhalten, haben Sie hoffentlich ein Gefühl für ihre Kräfte und wie sie dabei helfen können, dabei einen netteren Code zu erzielen.
Das obige ist der detaillierte Inhalt vonErweiterte CSS-Animation mit Cubic-Bezzier (). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Ouyi-Handelsplattform-App
Implementierungsmethode für die Python-Online-Wiedergabefunktion
Was beinhaltet die Datenverschlüsselungsspeicherung?
Die Rolle der Validierungsfunktion
Datenwiederherstellung von Solid-State-Laufwerken
Was ist der Unterschied zwischen Webstorm und Idee?
Abfragemethode für Domainnamen der zweiten Ebene
Wie hoch ist das Überweisungslimit von Alipay?
Was soll ich tun, wenn eDonkey Search keine Verbindung zum Server herstellen kann?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
