Inspektion Animationen in DevTools

0
16

Ich stolperte über die Animation panel in Chrome DevTools den anderen Tag und fast sprang aus meinem Sitz, mit der reinen Freude. Ich war nicht nur völlig unbekannt, dass so ein Ding existiert, aber es war besser als das, was ich mir schon erhofft: Sie ermöglicht die Kontrolle und Manipulation von CSS-Animationen und visualisieren, wie alles funktioniert unter der Haube.

Zugriff auf die Systemsteuerung, den Kopf auf Mehr Extras → Animationen in der oberen rechten Menü, wenn DevTools ist geöffnet:

Viele der tutorials, die ich über diese gefunden waren ziemlich kompliziert, so lassen Sie uns einen Schritt zurück und betrachten ein kleineres Beispiel zu beginnen: hier ist eine demo, wo die hintergrund-Farbe der html-Elemente wird der übergang von schwarz zu orange on hover:

html – {
cursor: pointer;
background-color: #333;
transition: background-color. 4s ease;
}

html:hover {
background-color: #e38810;
}

Stellt Euch mal vor, wir verschieben möchten, dass der übergang Zeit nach unten aus 4s. Es kann ziemlich ärgerlich nur anstoßen, die Anzahl nach oben und unten in den element-inspector. Ich in der Regel würde geöffnet haben, DevTools, fand das element in den DOM-und dann immer so langsam zu manipulieren, durch Eingabe eines Wertes oder über die Tastatur Richtungstasten. Stattdessen können wir Feuer, demo, DevTools öffnen, und wechseln Sie auf die Registerkarte Animation, die sollte in etwa so Aussehen:

Standardmäßig, Chrome wird das “Zuhören” für die Animationen stattfinden. Sobald Sie das tun, werden Sie der Liste Hinzugefügt werden. Sehen, wie die animation Blöcke angezeigt werden, so in der Art wie eine audio-wave? Das ist ein frame, oder ein Gesetz, eine animation, und Sie können auf der timeline-oben ist es jeder Rahmen, der ihm folgt. Auf eine animation selbst, der Inspektor wird auch uns zeigen, welche Eigenschaft geändert wird, wie background-color oder transformieren. Wie nett ist das denn?

Wir können dann ändern Sie die animation durch klicken auf diese Leiste und verschieben Sie es über:

…und es aktualisiert die animation sofort — kein klicken und Bearbeiten einer animation das alte Weg! Auch ist Euch vielleicht aufgefallen, dass die Maus über eine animation frame wil markiert das element, das animiert) in blau. Dies ist praktisch, wenn Sie die Bearbeitung einer komplexen animation, und vergessen, was das verrückte seltsame pseudo-element ist. Wenn Sie mehrere Animationen auf einer Seite, dann siehst du alle aufgelistet, die in diesem Abschnitt ebenso wie in dieser demo:

Was wir hier tun, wird die Animation sowohl für die .Platz und der .Kreis, wenn die Maus auf dem html-element, also gibt es effektiv zwei getrennte divs animiert, in der gleichen Zeit — das ist, warum Sie sehen diese in der gleichen Rubrik wie.

Ich kann sehen, dass die Inspektion Animationen konnten auf diese Weise werden super nützlich für die kleinen Symbol-design auch. Nehmen Sie diese Feder der Hamburger-Menü-Animationen von Jesse Couch, wo möchten Sie vielleicht, um langsam alles nach unten, um die Dinge genau das richtige. Tja, das mit dem animation-Inspektor-tool können Sie genau dies tun:

Diese Schaltflächen in der oberen linken Ecke Steuern Sie die Wiedergabe-Geschwindigkeit der animation. So schlagen 10% wird die Geschwindigkeit auf ein Schneckentempo — damit haben Sie genug Zeit, um wirklich futz mit Dingen, bis Sie sind perfekt.

Ich habe konzentriert auf Chrom hier, aber es ist nicht der einzige browser mit einer animation inspector — Firefox-tool ist in jeder Hinsicht genauso nützlich. Die einzige unmittelbare Unterschied, den ich fand, war, dass Chrome wird hören für alle Animationen auf einer Seite und zeigt diese an, sobald Ihr gefangen. Aber, mit Firefox, müssen Sie überprüfen Sie das element, und nur dann wird es Ihnen zeigen die Animationen, die an das element. Also, wenn du machst das super komplexe Animationen, dann Chrome Werkzeug könnte eine smidge mehr hilfreich.

Animation Inspektor Dokumentation

  • Walkthrough auf Google-Entwickler
  • Animation Inspektor in Firefox – MDN