Inspektera Animationer i DevTools

0
46

Jag snubblade över Animation panel i Chrome DevTools den andra dagen och nästan hoppade ur min stol med ren glädje. Inte bara var jag helt omedveten om att en sådan inte existerar, men det var bättre än vad jag kunde hoppats: det låter dig styra och manipulera CSS-animationer och visualisera hur allt fungerar under huven.

För att öppna kontrollpanelen, gå till Fler Verktyg → Animationer i det övre högra menyn när DevTools är öppen:

Många av de tutorials som jag hittade om detta var ganska komplicerat, så låt oss ta ett steg tillbaka och titta på ett mindre exempel till att börja med: här är en demo där background-color av html-element kommer att övergången från svart till orange på hover:

html {
cursor: pointer;
background-color: #333;
övergång: background-color 4s lugn.
}

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

Låt oss föreställa oss att vi vill knuff att övergången ner tiden från 4s. Det kan bli ganska irriterande att bara stöta på det numret upp och ned i elementet inspektör. Jag normalt skulle har öppnat upp DevTools, finns det element i DOM och sedan allt så långsamt manipulera den genom att skriva in ett värde eller använda tangentbordet piltangenterna. Istället kan vi skjuta upp den demo, öppna DevTools, och växla till Animering på fliken som borde se ut ungefär så här:

Som standard, Chrome kommer att kunna “lyssna” för animationer för att ta plats. När de gör det, kommer de att läggas till i listan. Se hur de animation block visas ungefär som en ljud-wave? Det är en bild, eller en handling, av en animation och du kan se på tidslinjen över det varje ram som följer på det. På en animation själv, inspektör kommer även att visa oss vilken egendom som ändras, som bakgrund-färg eller förändra. Hur snyggt är det?

Vi kan sedan ändra det animering genom att ta tag i som bar och flytta den om:

…och det uppdateringar animation direkt — inga fler att klicka och redigera en animation på det gamla sättet! Också, du kanske har märkt att föra muspekaren över en animering ram wil markerat den del som är animerad i blått. Detta är praktiskt om du redigerar en komplex animering och glömma vad som galen konstig pseudo-element gör. Om du har flera animationer på en sida, då kan du se dem alla som anges i avsnittet precis som i den här demoversionen:

Vad vi gör här är att animera både den .torget och .cirkeln när svävar på html-element, så det är ett effektivt sätt två separata divar är animerad på samma tid — det är därför du kan se dem i samma avsnitt, bara sådär.

Jag kan se att inspektera animationer på detta sätt kunde vara super bra för lilla ikonen design också. Ta denna penna av Hamburgare meny animationer av Jesse Soffan där kanske du vill sakta ner allt för att få saker och ting rätt. Tja, med den animation som inspektör verktyg som du kan göra exakt som:

De knapparna i övre vänstra hörnet kommer att styra uppspelningen av animation. Så slå 10% kommer sakta till en crawl — vilket ger dig tillräckligt med tid att verkligen futz med saker tills de är perfekta.

Jag har fokuserat på Chrome här men det är inte den enda webbläsaren med en animering inspektör — Firefox-verktyg är på alla sätt lika bra. Den enda omedelbara skillnaden jag kunde se var att Chrome kommer att lyssna till några animeringar på en sida och kommer att visa dem en gång erövrade. Men med Firefox, måste du inspektera element och endast då kommer det att visa dig de animationer som är knutna till del. Så, om du gör super komplexa animeringar, då Chrome verktyg kan vara en lillebror till mer hjälp.

Animation Inspektör Dokumentation

  • Genomgång på Google Utvecklare
  • Animation inspektör i Firefox – MDN