Share
Wenn Sie das nächste Mal ein paar CSS3-basierte Animationen zusammenstellen, ist es möglicherweise hilfreich, die Chrome Developer Tools aufzurufen und die Animationsprüfung und die Optimierungsfunktionen zu nutzen. In diesem kurzen Tipp geben wir Ihnen einen Überblick darüber, welche Tools für die Entwicklung von Animationen in Chrome verfügbar sind, wie Sie darauf zugreifen und was sie für Sie tun können.
Wenn Sie CSS3-Animationen zum Testen der einzelnen Tools verwenden möchten, können Sie diesen Stift aus unserem Kurs verwenden. 10 CSS3-Projekte: Benutzeroberfläche und Layout:
Hier ist die vollständige Seitenversion.
Öffnen Sie auf einer Seite, auf der eine CSS3-Animation ausgeführt wird, zunächst die Chrome Developer Tools Ansicht> Entwickler> Entwicklertools. Alternativ können Sie auch eine Tastenkombination verwenden F12 oder STRG + UMSCHALT + I.
Sobald die Entwicklungswerkzeuge geöffnet sind, gehen Sie zu dem Menü, das durch drei vertikale Punkte in der oberen rechten Ecke symbolisiert wird, und wählen Sie Weitere Tools> Animationen Wie nachfolgend dargestellt:
Wenn Sie die Registerkarte "Animation" zum ersten Mal öffnen, werden keine Inhalte angezeigt, die sich auf Ihre Animationen beziehen. Es wird nur eine Meldung angezeigt Animationen lauschen… . Der Grund dafür ist, dass die Registerkarte bereits geöffnet sein muss, wenn die Seite zum ersten Mal geladen wird.
Um dem Panel das Erfassen von Informationen zu Ihren Animationen zu ermöglichen, aktualisieren Sie die Seite. Folgendes wird angezeigt:
Das kleine farbige Diagrammsymbol oben links zeigt die Animationen Ihrer Seite. Klicken Sie auf dieses Symbol, um die Werkzeuge zur Animationsprüfung zu öffnen:
Während die Animationen abgespielt werden, sehen Sie, wie sich der rote Abspielkopf über die Timeline bewegt. Dieser Abspielkopf kann mit der Maus erfasst und manuell gescrubbt oder an einem bestimmten Punkt platziert werden.
Jede Zeile in der Benutzeroberfläche repräsentiert eine einzelne Animation auf der Seite. Sie werden feststellen, dass jede Linie einen Teil mit einer dunkleren, gesättigten Farbe hat. Dies gibt die Länge der Animation an und die helleren Segmente, die danach kommen, repräsentieren die Animation, die sich wiederholt.
Sie sehen auch mehrere kleine Kreise entlang jeder Animationslinie. Diese entsprechen den Keyframes der Animation. Die dunklen Kreise repräsentieren den Anfang und das Ende der Animation und die Hohlkreise repräsentieren interstitial Keyframes irgendwo dazwischen.
Die Interstitial-Keyframes (Keyframes zwischen Beginn und Ende jedes Animationszyklus) in jeder Zeile können an verschiedene Positionen gezogen werden. Wenn Sie sie verschieben, wird die zeitliche Anpassung der Animation im Browserfenster angezeigt. Dies kann für das Experimentieren mit dem genauen Prozentsatz eines Interstitial-Keyframes hilfreich sein.
Der knifflige Teil ist jedoch, dass Sie im Code keine Aktualisierung des Codes sehen Styles Registerkarte, während Sie diese Experimente durchführen. Wenn Sie Ihre Interstitial-Keyframes genau an der richtigen Stelle platzieren, können Sie stattdessen manuell ermitteln, welchen prozentualen Wert ein Keyframe verwenden soll.
Wenn Sie den Abspielkopf direkt über dem betreffenden Keyframe platzieren, wird oben links im Bedienfeld ein Zeitstempel angezeigt, der angibt, wie weit Sie sich in der Animation in Sekunden befinden. Sie können dann herausfinden, wie viel Prozent diesmal die Gesamtdauer der Animation ist. Im folgenden Beispiel befindet sich der Abspielkopf bei einer 2s-Animation bei etwa 1s. Daher wissen wir, dass der Keyframe bei 50% liegt..
Es gibt noch weitere Änderungen, die Sie im vornehmen können Animationen Tab das werden Aktualisieren Sie Ihren Code in der Styles Tab, damit Sie genau sehen können, welche Werte in Ihr CSS übertragen werden sollen. Die erste davon ist die Verzögerung, bevor eine Animation zu spielen beginnt, und die zweite ist die Dauer.
Um die Verzögerung vor der Wiedergabe einer Animation anzupassen, bewegen Sie den Cursor über die Linie, bis Sie einen handgeformten Cursor sehen. Ziehen Sie dann horizontal. Der Verzögerungswert wird im aktualisiert Styles Tab:
Um die Dauer der Animation zu ändern, bewegen Sie den Mauszeiger über den letzten Keyframe, bis Sie einen Doppelpfeilzeiger sehen. Ziehen Sie dann horizontal. Wieder wird der Wert im aktualisiert Styles Tab.
Sie können auch die Entwicklertools von Chrome verwenden, um die Geschwindigkeitskurve zu ändern, die das Timing einer Animation steuert. Beginnen Sie mit der Untersuchung eines Elements, auf das eine Animation angewendet wurde. Auf der linken Seite der aktuell angegebenen Timing-Funktion sehen Sie eine kleine Box mit einem "Squiggle". Klicken Sie darauf, um den Cubic Bezier-Editor zu öffnen:
Ein Fenster öffnet sich und zeigt Ihnen eine Bezier-Kurve, die die aktuelle Timing-Funktion veranschaulicht. Von hier aus können Sie eine vorhandene Voreinstellung auswählen, indem Sie auf eine der Miniaturansichten auf der linken Seite klicken, oder Sie können die Ziehpunkte des Hauptkurvenbilds ziehen, um einen benutzerdefinierten Cubic-Bezier-Wert zu erstellen, den Sie anschließend in Ihr CSS kopieren können:
Während Sie weitergehen, sehen Sie eine kleine violette Kugel, die von links nach rechts über dem Editor animiert wird und Ihnen eine Vorschau Ihrer Timing-Funktion in Aktion bietet.
Erfahren Sie mehr über Bezierkurven und Zeitfunktionen in diesem Kaffeepause-Kurs:
Eine weitere hilfreiche Funktion ist die Möglichkeit, die in Ihrer Animation verwendeten Ebenen zu visualisieren, einschließlich der Option, die Visualisierung zu drehen und aus verschiedenen Blickwinkeln zu betrachten, um besser zu verstehen, wie die Dinge funktionieren.
Öffnen Sie die Schichten Öffnen Sie das Chrome Dev Tools-Menü und wählen Sie Weitere Werkzeuge> Ebenen.
Einmal die Schichten Tab ist geöffnet, wählen Sie die Modus drehen Werkzeug oben links:
Sie können dieses Werkzeug jetzt verwenden, um die Ebenenvisualisierung in jeden Winkel zu drehen, den Sie benötigen, um zu sehen, wie die Teile Ihrer Animation am besten funktionieren:
Lassen Sie uns einen kurzen Überblick über die Animationsentwicklungswerkzeuge von Chrome erhalten:
Manchmal kann es sehr präzise und wählerisch sein, eine Animation richtig aussehen zu lassen. Diese Tools geben Ihnen dringend benötigte Einblicke in Ihre Animationen sowie Feedback in Echtzeit, um Ihnen zu helfen, alles perfekt zu machen.
Accentsconagua