Share
Nästa gång du sätter ihop några CSS3-baserade animeringar kan du tycka att det är bra att hoppa in i Chrome Developer Tools och dra nytta av dess animationsinspektion och anpassningsfunktioner. I det här snabba tipset ger vi dig en översikt över vilka animationsverktyg som finns tillgängliga i Chrome, hur du får tillgång till dem och vad de kan göra för dig.
När du går med, om du vill ha några CSS3-animationer för att testa varje verktyg, kan du använda den här penna från vår kurs. 10 CSS3-projekt: UI och Layout:
Här är fullversionsversionen.
På en sida med en CSS3-animering som körs, öppna först Chrome Developer Tools genom att gå Visa> Utvecklare> Utvecklarverktyg. Alternativt kan du antingen använda en tangentbordsgenväg F12 eller CTRL + SHIFT + I.
När dev-verktygen är öppna, gå till menyn symboliserad av tre vertikala prickar längst upp till höger och välj sedan Fler verktyg> Animationer enligt nedanstående:
När du först öppnar animeringsfliken ser du inte något innehåll som är relaterat till dina animeringar, du får bara se ett meddelande som säger Lyssnar på animeringar ... . Anledningen till detta är att för att arbeta måste fliken redan vara öppen när sidan laddas först.
För att låta panelen fånga information om dina animeringar, uppdatera sidan och så ser du detta:
Den lilla färgade ikonen längst upp till vänster representerar dina sidans animeringar. Klicka på den ikonen för att öppna animeringsinspektionsverktygen:
När animeringen spelar ser du det röda spelläget som rör sig över tidslinjen. Detta spelhuvud kan gripas med musen och manuellt skruvas eller placeras vid en viss punkt.
Varje rad i gränssnittet representerar en individuell animering på sidan. Du märker att varje rad har en del med mörkare, mer mättad färg. Detta indikerar animationslängden och de lättare segmenten som kommer efteråt representerar animationen som upprepar sig själv.
Du ser också flera små cirklar längs varje animeringslinje. Dessa motsvarar animeringens nyckelbilder. De mörkfärgade cirklarna representerar animationens början och slut, och de ihåliga cirklarna representerar interstitial keyframes var som helst mellan.
De interstitiella nyckelramarna (nyckelramar mellan början och slutet av varje animationscykel) på varje rad kan dragas till olika positioner och när du flyttar dem ser du animeringen i webbläsarfönstret ändrar tidpunkten. Detta kan vara bra för att experimentera med exakt vilken procentenhet en interstitiell nyckelram ska falla på.
Den knepiga delen är dock att du inte ser någon uppdatering av koden i Styles fliken medan du utför dessa experiment. Istället, när du får dina interstitiella nyckelbilder placerade på precis rätt punkt, kan du manuellt räkna ut vilket procentvärde en nyckelram ska ställas in för att använda.
Placera spelhuvudet direkt över den aktuella keyframen och du får se en tidsstämpel längst upp till vänster på panelen som berättar hur långt du tar med animationen i sekunder. Du kan sedan räkna ut vilken procentandel den här tiden är för den totala animationsvaraktigheten. I exemplet nedan är spelhuvudet på ungefär 1s av en 2s-animation, så vi vet att den här keyframen är vid 50%.
Det finns andra ändringar du kan göra i animationer fliken som kommer uppdatera din kod i Styles fliken så att du kan se exakt vilka värden som ska transplanteras i din CSS. Den första av dessa är förseningen innan en animation börjar spela, och den andra är dess varaktighet.
För att justera fördröjningen innan en animering spelas, sväng över sin linje tills du ser en handformad markör och dra sedan horisontellt. Du får se uppdateringsfördröjningsvärdet i Styles flik:
För att ändra animationens varaktighet svävar du över sin senaste nyckelbild tills du ser en pilmarkör med dubbla ändar och dra sedan horisontellt. Återigen ses värdet uppdateras i Styles flik.
Du kan också använda Chromes dev-verktyg för att ändra hastighetskurvan som styr en animations timing. Börja med att inspektera ett element som har en animation applicerad på den. Till vänster om den aktuellt angivna tidsfunktionen ser du en liten låda med en "squiggle" i den. Klicka på den för att öppna den kubiska bezier-redigeraren:
En lådan öppnas som visar en snabbare kurva som illustrerar den aktuella tidsfunktionen. Härifrån kan du välja en befintlig förinställning genom att klicka på en av miniatyrerna till vänster, eller du kan dra handtagen på huvudkurvan runt om för att skapa ett anpassat cubic-bezier-värde som du sedan kan kopiera till din CSS:
När du går längs ser du en liten lila bollanimering från vänster till höger över toppen av redigeraren, vilket ger dig en förhandsgranskning av din tidsfunktion i åtgärd.
Läs mer om snabba kurvor och timingfunktioner i den här kaffepausen:
En annan extra hjälpsam funktion är möjligheten att visualisera lagren som används i din animering, inklusive möjligheten att rotera visualiseringen och titta på den från olika vinklar för att bättre förstå hur sakerna fungerar.
För att öppna Skikten panelen, gå till menyn Chrome Dev Tools och välj Fler verktyg> Lager.
När Skikten Fliken är öppen, välj Rotera läge verktyg längst upp till vänster:
Du kan nu använda det här verktyget för att rotera lagvisualiseringarna i vilken vinkel du behöver för att se hur delarna av din animation fungerar:
Låt oss få en snabb sammanfattning av Chrome: s animationsverktyg för dev
Ibland gör man en animationslook precis kan vara en mycket precis och finaktig process. Dessa verktyg kan ge välbehövlig inblick i dina animationer, liksom realtids återkoppling, för att hjälpa dig att få allt perfekt.
Accentsconagua