Detaillierte Erklärung der CSS-Animationsattribut-Keyframes

Wie lange ist es her, dass ich meine Kolumne aktualisiert habe? Ein halbes Jahr? Die zweite Jahreshälfte ist so arbeitsreich, dass sie kurz vor dem Abheben oder, im wahrsten Sinne des Wortes, dem Start steht? Die wenige Freizeit, die mir zur Verfügung stand, habe ich in der ersten Hälfte mit Python verbracht, und inzwischen habe ich das meiste davon fast vergessen (ich widme mir selbst das Lied „Liangliang“). Die zweite Hälfte habe ich mit JavaScript verbracht, und ich habe endlich den Mut aufgebracht, systematisch mit dem Erlernen von JS zu beginnen (den Kanal wechseln und „Courage“ von Fish Leong singen). Ursprünglich wollte ich abwarten, bis ich mit dem Erlernen von WebAPI fertig war, und dann meinen ultimativen Zug machen. SVG+CSS-Animation in Kombination mit JavaScript ist wie ein Tiger mit Flügeln, der schnell vorankommt. Als ich jedoch die lebhaften Diskussionen in der Autorengruppe „Nuggets“ sah, fühlte ich mich plötzlich wie ein völlig Fremder (sollte ich Tanya Chua hier erwähnen?) und beschloss, einen weiteren Artikel zu schreiben, um auf mich aufmerksam zu machen.

Dieser Artikel wurde ursprünglich als kleiner Auszug aus der Broschüre „SVG+CSS-Animation“ geschrieben. Aus verschiedenen unerklärlichen Gründen ist die Broschüre gestrandet, gestrandet … und die Abfahrtszeit ist nirgendwo in Sicht. Keyframes sind jedoch wichtige Elemente zur Steuerung des Animationszustands zu verschiedenen Zeitpunkten und bestimmen die endgültige Form der 72 Transformationen, daher beginnt diese Update-Kolumne damit. Was das Heft betrifft, können wir es, wenn es verteilt werden kann, einfach durch andere Hüllen ersetzen. Aber das ist eine Geschichte für später.

Auf die Grundkonzepte von Keyframes kann hier verzichtet werden. Im Folgenden finden Sie nur Trockenübungen.

Fallbeispiel: Ein Kreis, der sich immer weiter vorwärtsbewegt

Da wir nur Keyframes erklären, haben wir nur eine einfache horizontale Verschiebungsanimation erstellt. Daher existiert dieser Artikel unabhängig von SVG und bezieht sich nur auf die CSS3-Animationseigenschaften.

Dies ist ein Kreis, der versucht, vom Startpunkt zum Endpunkt zu rollen. Die gesamte Reise ist 800 Pixel groß, aber ich habe drei Stationen an drei Stellen auf dem Weg eingerichtet. Jetzt müssen wir Keyframes definieren, damit der Kreis in die Station einfährt und auf seinem Weg eine Weile innehält.

1. Beginnen wir mit dem Einfachsten

Der CSS-Teil definiert eine äußerst einfache Displacement-Animation, die in 4 Sekunden bei linearer Geschwindigkeit abgeschlossen ist (Case-Keyframe-Demonstration 1 – Grundlagen).

@keyframes verschieben{
0 % {transform:translateX(0)}
100 % {transform:translateX(800px)}
}
.c_move{animation:move 4s linear both} /*both: nach der Bewegung am Endpunkt bleiben*/

Dies kommt hauptsächlich dann zum Tragen, wenn eine Endlosschleife für Animationen definiert ist.

Die Grundeinstellungen führen natürlich zu einfachen Animationen, die nichtssagend und langweilig sind.

2. Verzögerter Start

Als nächstes möchte ich, dass der Kreis 2 Sekunden lang am Startpunkt bleibt, bevor er sich zu bewegen beginnt. Meine erste Reaktion ist, die Verzögerungsanimation- Verzögerung in den Animationseigenschaften zu verwenden und die Zeit als 2 Sekunden zu definieren. Ist das in Ordnung? OK, aber hier ist ein fortgeschrittenerer Ansatz. Beim Definieren von Keyframes verwenden wir viele Prozentwerte. Der Prozentwert stellt hier den Zeitknoten dar, was bedeutet , dass der Keyframe die Statusattribute verschiedener Zeitknoten definiert. Schauen wir uns ein weiteres Bild an. Verwechseln Sie dieses Bild nicht mit der Pfaddemonstration oben. Dies ist ein Bild der Animationszeitleiste.

Den Kreis 2 Sekunden lang am Startpunkt zu lassen, ist nur eine repräsentative Aussage. Übersetzt in unsere Animationsdefinitionssprache bedeutet dies, dass in den ersten 2 Sekunden des 4-Sekunden-Animationszyklus kein Animationseffekt auftritt. Lassen Sie mich also die Animationsregeln wie folgt definieren:

@keyframes verschieben{
0 % {transform:translateX(0)}
50 % {transform:translateX(0px)}
100 % {transform:translateX(800px)}
}

Es ist leichter zu verstehen, wenn man es mit der Aufteilung der Zeitleiste oben vergleicht. Auf diese Weise erzielen wir den Effekt, 2 Sekunden am Startpunkt zu bleiben und die gesamte Animation in den nächsten 2 Sekunden abzuschließen. Hier können wir es auch einfacher schreiben: 0%, 50%{transform:translateX(0)} . Dieselben Attribute können durch Kommas getrennt miteinander kombiniert werden. Fall-Keyframe-Demonstration - verzögerter Start

3. Frühzeitig Schluss machen

Aufgrund des verspäteten Beginns kann auf ein vorzeitiges Ende geschlossen werden. Um eine Unterscheidung zu ermöglichen, habe ich die Animation 3 Sekunden früher enden lassen. Zeichnen Sie wie üblich zuerst die Analyse der Zeitleiste.

Die entsprechenden Keyframes sind wie folgt definiert:

@keyframes verschieben{
0 % {transform:translateX(0)}
25 %, 100 % {transform:translateX(800px)}
}

Der endgültige Ergebniskreis muss darin bestehen, die Reise mit der vierfachen Geschwindigkeit abzuschließen (schließlich muss die ursprüngliche Zeit von 4 Sekunden auf 1 Sekunde komprimiert werden) und dann am Ende gemütlich zu warten, bis die gesamte Animationszeit abgelaufen ist. Fall-Keyframe-Demonstration - Ende früh

4. Zwischenstopp

Die vorbereiteten Stationen können nun eine Rolle spielen. Ich hoffe, dass sich der Kreis folgendermaßen bewegt: Während der gesamten Reise bleibt er nur 1 Sekunde lang an der ersten Station (nach einer Bewegung von 200 Pixeln), um eine kleine Anpassung vorzunehmen. Wie sieht dies aus, wenn es auf einer Zeitachse abgebildet wird?

Hier tauchen einige merkwürdig aussehende Zahlen auf, die einer Erklärung bedürfen. Lassen Sie uns zunächst eines klarstellen: Wenn wir die Zeitleiste analysieren, möchten wir letztendlich Zeitknoten erhalten. Nach unserem Design beträgt die zum Verweilen erforderliche Zeit 3 ​​s, wenn die Bewegung 1 s dauert. Die 3-s-Zeit wird in zwei Teile unterteilt. Der erste Teil sind die ersten 200 Pixel und der zweite Teil sind die letzten 600 Pixel. Da es sich um eine lineare, gleichmäßige Geschwindigkeit handelt, werden bei der Unterteilung der Zeitleiste in drei Teile, A+B+C, 200 Pixel in Zeitabschnitt A ausgeführt und 600 Pixel in Zeitabschnitt C. Die Zeit, die A entspricht, wird mit 0,75 s berechnet, die Zeit, die C entspricht, beträgt 2,25 s und die Zeit von B ist die Verweilzeit von 1 s. Dann wird es in den entsprechenden Prozentsatz umgerechnet. Dies ist die Berechnungsmethode für die letzten beiden Zeitknoten in der Mitte. Nachdem die Zeitleiste analysiert wurde, ist die Definition des CSS-Teils leicht zu verstehen:

@keyframes verschieben{
0 % {transform:translateX(0)}
18,75 %, 43,75 % {transform:translateX(200px)} /*entspricht dem 1-Sekunden-Aufenthalt*/
100 % {transform:translateX(800px)}
}

Fall-Keyframe-Demonstration-1 Sekunde an der ersten Station bleiben

5. Vorwärts springen wie ein Wurmloch

Um den Schwierigkeitsgrad zu erhöhen, ist es kein Problem mehr, an einem beliebigen Punkt auf dem Weg anzuhalten. Die Idee, an einem Punkt und an mehreren Punkten anzuhalten, ist dieselbe. Jetzt lasse ich den Kreis springend vorwärts wandern. Nachdem er die erste Station erreicht hat, bleibt er 1 Sekunde, überquert die zweite Station und erreicht direkt die dritte Station, bleibt 1 Sekunde und beendet die Reise. Nach dem Prinzip der Raumfaltung kam es bei 200 und 600 zu Übergängen. Zeitleiste der Analyse:

Achten Sie besonders auf den roten Teil, der den Zeitpunkt des Übergangs darstellt, der sich ohne Zeitänderung um 200 Pixel verschiebt. Der CSS-Teil sieht laut Timeline-Analyse theoretisch so aus:

@keyframes verschieben{
0 % {transform:translateX(0)}
25 %, 50 % {transform:translateX(200px)}
50 %, 75 % {transform:translateX(600px)}
100 % {transform:translateX(800px)}
}

Was bewirkt es?

Es ist ganz anders, als ich es mir vorgestellt habe. Wo liegt das Problem? Der Browser kennt Ihre wahren Gedanken zum Zeitpunkt 50 % nicht. Er wird nur denken, dass Sie es falsch definiert haben. Wenn es zwei identische 50 %-Keyframes mit unterschiedlichen Eigenschaftswerten gibt, ignoriert der Browser automatisch den ersten und verwendet den letzten gültigen Wert als Referenz. Die obige Definition ist also gleichbedeutend mit der Übermittlung der folgenden Nachricht an den Browser:

@keyframes verschieben{
0 % {transform:translateX(0)}
25 % {transform:translateX(200px)}
50 %, 75 % {transform:translateX(600px)} /*Bleib 1 Sekunde, nachdem du 600 Pixel bewegt hast*/
100 % {transform:translateX(800px)}
}

Deshalb scheint es, als würde der Zug nach Erreichen der ersten Station in Richtung der dritten Station beschleunigen, dann anhalten und die restliche Reise fortsetzen. Jetzt wird das Spiel immer interessanter, vielleicht können wir versuchen , den Browser auszutricksen . Da zum selben Zeitpunkt nur ein Attributwert definiert werden darf, was passiert, wenn ich einen Zeitpunkt hinzufüge, um ihn daneben zu definieren?

@keyframes verschieben{
0 % {transform:translateX(0)}
25 %, 50 % {transform:translateX(200px)}
50,0001 %, 75 % {transform:translateX(600px)} 
100 % {transform:translateX(800px)}
}

Schauen Sie sich den oben angezeigten Zeitpunkt **50,0001 %** an. Raten Sie, was passiert ist? Dabei handelt es sich um die oben erwähnte sogenannte „Browser austricksen“-Methode. Im Bereich von 50 % → 50,0001 % trat eine Verschiebungsänderung von 400 Pixeln (200 → 600) auf. So erhalten wir den folgenden Effekt: case-keyframe demonstration-transition

Im Prinzip handelt es sich dabei um eine optische Täuschung, bei der die Verschiebung zwischen zwei Positionen in einem sehr kurzen Zeitraum erfolgt. Da die Zeit so kurz ist, dass sie ignoriert werden kann, entsteht die Illusion eines Sprungs.

Zusammenfassen

Haben Sie nach dem Lesen der oben aufgeführten repräsentativen Beispiele ein neues Verständnis für die Definition von Keyframes? Sie denken vielleicht, dass die beiden Anforderungen „verzögerter Start“ und „frühes Ende“ durch die Definition der Verzögerungszeit und der Animationszykluszeit erreicht werden können, um denselben Effekt zu erzielen. Bei einer Endlosschleifenanimation funktioniert der verzögerte Start jedoch nur einmal. Sobald die Animation in einen Wiederholungszyklus eintritt, wird diese Eigenschaftseinstellung nicht mehr unterstützt. Versuchen Sie es daher, wenn möglich, mit Keyframe-Definitionen.

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.