Wenn Sie das nächste Mal reguläre CSS3-basierte Animationen erstellen, kann es hilfreich sein, die Chrome-Entwicklertools aufzurufen und die Funktionen zur Überprüfung und Anpassung von Animationen zu nutzen. In diesem kurzen Artikel erfahren Sie, welche Animationstools in Chrome verfügbar sind, wie Sie darauf zugreifen können und wie sie Ihnen helfen können.
Wenn Sie Ihre CSS3-Animationen mit diesen Tools testen möchten, können Sie den vorgefertigten Code aus unserem Kurs verwenden:
10 CSS3-Projekte: Benutzeroberfläche und Layout .
Hier ist die Vollversion der Seite.Öffnen der Registerkarte Animationen
Öffnen Sie auf der Seite mit laufender CSS3-Animation zunächst die "Chrome Developer Tools", indem Sie auf
Ansicht> Entwickler> Entwicklertools klicken. Alternativ können Sie die Tastenkombination verwenden:
F12 oder
STRG + UMSCHALT + I.Wenn die Werkzeuge des Entwicklers geöffnet sind, gehen Sie zu dem Menü, das durch drei vertikale Punkte in der oberen rechten Ecke angezeigt wird, und wählen Sie dann
Weitere Werkzeuge> Animationen aus, wie unten gezeigt:
Wenn Sie die Registerkarte "Animation" zum ersten Mal öffnen, wird kein Inhalt zu Ihrer Animation angezeigt. Es wird lediglich die Meldung "Auf
Animationen warten" angezeigt. Der Grund dafür ist, dass das Tool die Registerkarte verdient hat und bereits geöffnet sein sollte, wenn die Seite zum ersten Mal geladen wird.
Aktualisieren Sie die Seite, damit das Bedienfeld Informationen zu Ihren Animationen lesen kann, und Sie sehen Folgendes:
Das kleine farbige Symbol oben links ist eine Animation der Elemente Ihrer Seite. Klicken Sie auf dieses Symbol, um die Tools zur Überprüfung der Animation zu öffnen:
Wiedergabecursor und Keyframes
Während die Animation abgespielt wird, sehen Sie einen roten Wiedergabecursor, der sich entlang der Timeline bewegt. Dieser Cursor kann mit der Maus an die gewünschte Stelle bewegt werden.
Jede Zeile der Benutzeroberfläche repräsentiert ein separates Element der Animation auf der Seite. Möglicherweise stellen Sie fest, dass jede Zeile einen Abschnitt mit dunklerer gesättigter Farbe enthält. Es zeigt die Länge der Animation und die darauf folgenden helleren Segmente stellen eine Wiederholung der Animation dar.
Sie sehen auch mehrere kleine Kreise entlang jeder Animationslinie. Sie entsprechen den Keyframes der Animation. Dunkle Kreise repräsentieren den Anfang und das Ende der Animation, und hohle Kreise repräsentieren dazwischen liegende Keyframes.
Intermediate Keyframes
Zwischen-Keyframes (Keyframes zwischen Anfang und Ende jedes Animationszyklus) in jeder Zeile können an verschiedene Positionen gezogen werden. Wenn Sie sie verschieben, sehen Sie, wie sich die Animationszeit im Browserfenster ändert. Dies ist ein gutes Werkzeug, um zu experimentieren, wie viel Prozent für jeden Zwischen-Keyframe sein sollten.
Die Schwierigkeit liegt jedoch in der Tatsache, dass Sie während dieser Experimente keine Code-Aktualisierungen auf der Registerkarte Stile sehen. Wenn Sie Ihre Zwischen-Keyframes an der richtigen Stelle platzieren, können Sie stattdessen manuell bestimmen, welcher Prozentwert für den Keyframe verwendet werden soll.
Positionieren Sie den Wiedergabecursor direkt über dem betreffenden Keyframe. In der oberen linken Ecke des Bedienfelds wird ein Zeitstempel angezeigt, der angibt, wie weit Sie in Sekunden in der Animation sind. Dann können Sie herausfinden, wie viel Prozent diesmal die Gesamtdauer der Animation ist. Im folgenden Beispiel befindet sich der Wiedergabecursor bei etwa 1 Sekunde einer 2-Sekunden-Animation, sodass wir wissen, dass dieser Keyframe 50% beträgt.
Animationsverzögerung und -dauer
Sie können auf der Registerkarte "
Animationen" weitere Änderungen vornehmen, die Ihren Code auf der Registerkarte "
Stile" aktualisieren, damit Sie genau sehen können, welche Werte in Ihrem CSS vorgenommen werden müssen. Die erste ist die Verzögerung, bevor die Animation abgespielt wird, und die zweite ist die Dauer.
Um eine Verzögerung vor dem Starten einer Animation anzuwenden, bewegen Sie den Mauszeiger über die Linie, bis Sie einen handförmigen Cursor sehen, und ziehen Sie ihn dann horizontal. Die Aktualisierung des Verzögerungswerts wird auf der Registerkarte
Stile angezeigt:
Um die Dauer der Animation zu ändern, bewegen Sie den Mauszeiger über Ihren letzten Keyframe, bis Sie den bidirektionalen Cursor sehen, und ziehen Sie ihn dann horizontal. Auch hier wird der Wert auf der Registerkarte
Stile aktualisiert.
Animations-Timing-Funktion
Sie können auch die Chrome-Entwicklertools verwenden, um die Geschwindigkeitskurve zu ändern, die die Animationszeit steuert. Überprüfen Sie zunächst das Element, für das die Animation gilt. Links von der aktuell angegebenen Timing-Funktion sehen Sie ein kleines Symbol mit einer „Tilde“. Klicken Sie darauf, um den Bezierkurven-Editor zu öffnen:
Es öffnet sich ein Fenster mit der Bezier-Kurve, in der die aktuelle Timing-Funktion angezeigt wird. Hier können Sie eine vorhandene Voreinstellung auswählen, indem Sie auf eine der Miniaturansichten links klicken, oder Sie können die Markierungen des Hauptbilds der Kurve ziehen, um einen benutzerdefinierten Wert für die Bezierkurven zu erstellen, den Sie dann in Ihr CSS kopieren können:
Während Sie sich ändern, sehen Sie oben im Editor eine kleine lila Kugel, die sich von links nach rechts bewegt und die aktuellen Änderungen in Ihrer Timing-Funktion anzeigt.
Rendern rotierender Ebenen
Eine weitere nützliche Funktion ist die Möglichkeit, die in Ihrer Animation verwendeten Ebenen zu visualisieren, einschließlich der Möglichkeit, die angegebene Visualisierung zu drehen und aus verschiedenen Blickwinkeln anzuzeigen, um besser zu verstehen, wie alles funktioniert.
Um das
Ebenenbedienfeld zu öffnen,
rufen Sie das Menü Chrome Dev Tools auf und wählen Sie
Weitere Tools> Ebenen.
Wenn die Registerkarte
Ebenen geöffnet ist, wählen Sie das Werkzeug
Rotationsmodus in der oberen linken Ecke:
Mit diesem Werkzeug können Sie jetzt die Ebenenvisualisierung in einen beliebigen Winkel drehen, um besser sehen zu können, wie Teile Ihrer Animation funktionieren:
Fertigstellung
Werfen wir einen kurzen Blick auf die Chrome-Animationstools:
- Öffnen Sie die Animationstools, indem Sie zuerst Chrome Dev Tools öffnen und dann im Menü dev tools Weitere Tools> Animationen auswählen.
- Das Animationsfenster sollte geöffnet sein, wenn die Seite geladen wird, um Animationsinformationen anzuzeigen. Aktualisieren Sie die Seite, um dies zu erreichen.
- Klicken Sie auf die Miniaturansicht des kleinen Farbdiagramms, um Animationsinformationen anzuzeigen.
- Jede Zeile repräsentiert eine Animation.
- Die ausgefüllten Kreise repräsentieren die Start- und End-Keyframes.
- Hohlkreise repräsentieren Zwischenschlüsselrahmen.
- Zwischen-Keyframes können verschoben werden. Die entsprechende Code-Aktualisierung wird jedoch nicht auf der Registerkarte " Stile" angezeigt. Stattdessen wird der Prozentpunkt, auf den sie fallen, manuell berechnet.
- Ändern Sie den Wert für die Animationsverzögerung, indem Sie den Mauszeiger über die Linie bewegen, bis Sie Ihren Handcursor sehen, und ziehen Sie ihn dann horizontal.
- Ändern Sie den Wert der Animationsdauer, indem Sie den Cursor über den letzten Keyframe bewegen, bis Sie den Cursor-Cursor mit einem doppelten Umriss sehen, und ziehen Sie ihn dann horizontal.
- Klicken Sie auf der Registerkarte Stile auf das Symbol links neben der vorhandenen Timing-Funktion, um den Bezierkurven-Editor zu öffnen.
- Wählen Sie aus den Voreinstellungen die Zeitfunktion der Einstellungen oder erstellen Sie Ihre eigene, indem Sie das Bild der Hauptkurve ändern.
- Öffnen Sie das Ebenenbedienfeld , indem Sie im Menü "Chrome Developer Tools" die Option " Weitere Tools"> "Ebenen" auswählen .
- Verwenden Sie in diesem Bereich den Rotationsmodus , um Ebenen Ihrer Animation aus einem beliebigen Winkel anzuzeigen.
Manchmal kann das Erstellen der perfekten Animation ein sehr genauer und subtiler Prozess sein. Diese Tools können dringend benötigte Informationen zu Ihren Animationen sowie Echtzeit-Feedback liefern, um Spitzenleistungen zu erzielen.