CSS3-Animation – Erläuterung der Funktion „Steps“

Als ich mir in letzter Zeit einige CSS3-Animationsquellcodeimplementierungen ansah, fand ich in der CSS-Codeanimation ein relativ unbekanntes Wort „steps“. Es wird im Quellcode folgendermaßen geschrieben:

animation: thunder 2s steps(1, end) infinite;

Nachdem ich relevante Informationen konsultiert hatte, stellte ich fest, dass die Funktion „steps“ ein Wert des Attributs animation-timing-function ist. Was ist also der Unterschied zwischen dieser Funktion und anderen Werten wie „easy“ und „linear“?

Vorgehensweise

Nachdem ich relevante Informationen nachgeschlagen hatte, stellte ich fest, dass ich nicht genug über animation-timing-function wusste. Tatsächlich bezieht sich die Funktion der animation-timing-function auf Schritte () und Kubik-Bezier (), was die Bézier-Kurvenfunktion ist. Werte wie linear und ease sind eigentlich spezielle Werte der Funktion cubic-bezier() . Die Funktion Schritte () hat auch zwei spezielle Werte: step-start und step-end . Nachdem wir diese Prämissen verstanden haben, analysieren wir nun die Rolle der Schrittfunktion im Detail.

Tatsächlich entsprechen die Schrittfunktion und cubic-bezier zwei Formen der Animation: springend und kontinuierlich. Lassen Sie uns noch einmal wiederholen, wie wir die cubic-bezier Funktion normalerweise verwenden:

div {
  Animation: 1 s lineare, unendliche Bewegung, abwechselnd;
}
@keyframes verschieben {
  0% {
    Rand links: 0;
  }
  30% {
    Rand links: 50px;
  }
  100 % {
    Rand links: 100px;
  }
}

Wir müssen nur die Keyframes in @keyframes definieren. Die Funktion cubic-bezier hilft uns, die Frames zwischen den Keyframes auszufüllen, um eine flüssige Animation zu erhalten. Aber manchmal möchten wir, dass die Animation nicht kontinuierlich, sondern ruckartig abgespielt wird. Dann müssen wir die Funktion steps verwenden.

Die Schrittefunktion erhält zwei Parameter: Nummer und Position. „Zahl“ ist eine positive Ganzzahl und „Position“ hat zwei Werte: „Start“ und „Ende“. Zuvor haben wir zwei spezielle Werte von Schritten erwähnt: Schrittstart und Schrittende, die tatsächlich Schritte (1, Start) bzw. Schritte (1, Ende) darstellen. Was bedeuten diese beiden Parameter?

Zahl: Zahl gibt an, in wie viele Segmente die Animation unterteilt ist. Das obige Beispiel zeigt beispielsweise, dass der gesamte Prozess der Div-Bewegung von 0px bis 100px in 4 Segmente unterteilt ist.

Position: Der Positionsparameter ist optional und beträgt standardmäßig „Ende“. Was bedeuten „Start“ und „Ende“? Meines Wissens nach unterteilt diese Zahl den gesamten Animationsprozess in mehrere Segmente oder Zyklen. „Start“ bedeutet, dass sich der Zustand der Animation am Startpunkt jedes Zyklus sofort ändert, während „Ende“ bedeutet, dass sich der Zustand der Animation am Endpunkt jedes Zyklus sofort ändert. Hier ist ein Bild aus dem offiziellen W3C-Dokument:

Im Koordinatensystem des obigen Bildes stellt die x-Achse die Zeit und die y-Achse den Fortschritt der Animation dar. Worauf wir in diesem Bild achten müssen, sind die durchgezogenen Punkte, die den Status der Animation darstellen. Schauen wir uns das erste Bild an, das die Schritte (1, Start) darstellt. Gemäß der vorherigen Erklärung besteht die gesamte Animation aus einem einzigen Zyklus, und der Startparameter wird so angegeben, dass die Animation am Startpunkt des Zyklus ihren Zustand ändert. Daher können wir sehen, dass die Koordinaten des ersten durchgezogenen Kreises (0,1) sind. Da für das zweite Bild „Ende“ angegeben ist, ändert sich der Zustand der Animation am Endpunkt des Zyklus plötzlich, sodass die Koordinaten der beiden entsprechenden ausgefüllten Kreise (0,0) und (1,1) sind. Gleiches gilt für die folgenden Schritte (3, Start) und Schritte (3, Ende), die hier nicht im Detail analysiert werden.

Um die Rolle der Schrittfunktion intuitiver zu verstehen, geben wir als Nächstes einige Beispiele, um unser Verständnis zu vertiefen:

Hier ist eine zusammenhängende Animation als Referenz. Ein Teil des Codes lautet wie folgt:

div {
  Breite: 100px;
  Höhe: 100px;
  Hintergrundfarbe: rot;
  Animation: 2 s lineare Bewegung;
}
@keyframes verschieben {
  0% {
    Rand links: 0;
  }
  100 % {
    Rand links: 200px;
  }
}

Die Wirkung ist wie folgt:

Es ist ersichtlich, dass sich das rote Quadrat nach 2 Sekunden mit konstanter Geschwindigkeit zum Endpunkt bewegt und dann zur Ausgangsposition zurückkehrt

Hier ist ein Beispiel für Schritte (1, Start):

div {
  Breite: 100px;
  Höhe: 100px;
  Hintergrundfarbe: rot;
  Animation: Bewegung 2 Sek. Schritt-Start;
}

Die Wirkung ist wie folgt:

Sie können sehen, dass der Block den Endpunkt erreicht, sobald ich auf „Aktualisieren“ klicke, und dann nach 2 Sekunden zur Ausgangsposition zurückkehrt.

Schauen wir uns das Beispiel steps(1, end) an:

div {
  Breite: 100px;
  Höhe: 100px;
  Hintergrundfarbe: rot;
  Animation: Bewegung 2 s, Schritt-Ende;
}

Die Wirkung ist wie folgt:

Sie können sehen, dass sich der Block nicht bewegt, wenn Sie auf Aktualisieren klicken. Dies liegt daran, dass sich der Block nach 2 Sekunden sofort auf die 200-Pixel-Position bewegt, dann endet die Animation und kehrt zur Ausgangsposition zurück. Da dieser Vorgang so schnell ist, dass er mit bloßem Auge nicht zu erkennen ist, sieht es so aus, als würde sich der Block nicht bewegen. Wenn Sie möchten, dass es am Endpunkt bleibt, fügen Sie dem Div einfach animation-fill-mode: forwards hinzu.

Betrachten wir die Situation der Aufteilung in mehrere Segmente. Zunächst wird der Start in mehrere Segmente unterteilt:

div {
  Breite: 100px;
  Höhe: 100px;
  Hintergrundfarbe: rot;
  Animation: 4 Sek.-Schritte bewegen (4, Start);
}

Die Wirkung ist wie folgt:

Im obigen Beispiel teilen wir die 4-Sekunden-Animation in 4 Zyklen auf. Der Block bewegt sich am Startpunkt jedes Zyklus, also 0 s, 1 s, 2 s und 3 s. Aus dem obigen Effektdiagramm können wir auch erkennen, dass die Zustandsänderung in dem Moment abgeschlossen ist, in dem ich auf Aktualisieren klicke, und dann 3 s später den Endpunkt erreicht. Er bleibt 1 s lang am Endpunkt, bis die Animation endet und er zur Startposition zurückkehrt.

Schauen wir uns die Situation an, in der das Ende in mehrere Segmente unterteilt ist:

div {
  Breite: 100px;
  Höhe: 100px;
  Hintergrundfarbe: rot;
  Animation: 4 Sek.-Schritte bewegen (4, Ende);
}

Die Wirkung ist wie folgt:

Wenn Sie „Ende“ angeben, ändert sich der Animationsstatus am Ende jedes Zyklus, in diesem Fall nach 1 s, 2 s, 3 s und 4 s. Aus dem obigen Effektdiagramm können wir auch erkennen, dass sich der Block 1 Sekunde, nachdem ich auf „Aktualisieren“ geklickt habe, zu bewegen beginnt. In dem Moment, in dem sich der Block zum Endpunkt bewegt, bewegt er sich 4 Sekunden später aufgrund des Endes der Animation wieder zurück zur Ausgangsposition, sodass die Illusion entsteht, dass sich der Block nicht zum Endpunkt bewegt.

Zusammenfassen

Oben finden Sie eine ausführliche Erläuterung der vom Editor eingeführten CSS3-Funktion „Animation-Steps“. Ich hoffe, dass sie für alle hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!