Inspeksjon Animasjoner i DevTools

0
57

Jeg snublet over Animasjonen panelet i Chrome-DevTools den andre dagen, og nesten hoppet ut av stolen med ren glede. Ikke bare var jeg helt uvitende om at noe slikt eksisterer, men det var bedre enn hva jeg kunne ha håpet: det lar deg styre og manipulere CSS-animasjoner og se hvordan alt fungerer under panseret.

For å få tilgang til panelet, dra til Flere Verktøy → Animasjoner i øverste høyre-menyen når DevTools er åpen:

Mange av tutorials jeg fant ut om dette var ganske komplisert, så la oss ta et skritt tilbake og se på en mindre eksempel til å begynne med: her er en demo der background-color av html-element vil overgangen fra svart til oransje på hover:

html {
cursor: pointer;
background-color: #333;
overgang: background-color 4s letthet;
}

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

La oss tenke oss at vi ønsker å dytte at overgangen ned fra 4s. Det kan bli ganske irriterende bare bumping at antall opp og ned i element inspektør. Jeg vanligvis ville har åpnet opp DevTools, fant element i DOM og så aldri så sakte manipulere den ved å taste inn en verdi eller bruke tastaturet retningstastene. I stedet kan vi fyre opp som demo, åpne DevTools, og bytte til en Animasjon kategorien som burde se noe som dette:

Som standard, kommer Chrome til å “lytte” til animasjoner til å ta plass. Når de gjør det, vil de bli lagt til i listen. Se hvordan de animasjon blokker vises liksom som en lyd bølge? Det er en ramme, eller handle i en animasjon, og du kan se den på tidslinjen over det hver ramme som følger av det. På en animasjon seg selv, inspektør vil også vise oss som eiendel blir endret, som bakgrunn-farge, eller gjør. Hvor ryddig er det?

Vi kan da endre animasjonen ved å ta tak i stolpen og flytte den om:

…og den oppdaterer animasjon med en gang — ikke mer å klikke og redigere en animasjon den gamle måten! Også, kanskje du har lagt merke til at hvis du holder markøren over en animasjon ramme wil uthevet element som er animert i blått. Dette er nyttig hvis du redigerer en kompleks animasjon og glemmer hva som gal rare pseudo element gjør. Hvis du har flere animasjoner på en side, så kan du se dem alle som er oppført i denne delen akkurat som i denne demoen:

Det vi gjør her er å animere både den .square og .sirkel når musepekeren føres over på html-element, slik at det er effektivt to separate divs animert i samme tidsrom — det er derfor du kan se dem i samme kapittel bare sånn.

Jeg kan se at inspeksjon animasjoner på denne måten kunne være super nyttig for små ikon design, også. Ta denne pennen av Hamburger meny animasjoner av Jesse Sofaen hvor du ønsker kanskje å bremse ned alt for å få ting akkurat. Vel, med animasjon inspektør verktøyet kan du gjøre akkurat det:

Disse knappene i øverste venstre hjørne vil styre avspilling hastigheten på animasjonen. Så treffer 10% vil avta ting til en gjennomgang — noe som gir deg nok tid til å virkelig futz med ting før de er perfekte.

Jeg har fokusert på Chrome her, men det er ikke den eneste nettleseren med en animasjon inspector — Firefox tool er på alle måter like nyttig. Den eneste umiddelbare forskjellen jeg fant ut at Chrome vil lytte til alle animasjoner på en side og vil vise dem når deres fanget. Men, med Firefox, må du inspisere element og bare da vil det vise animasjoner knyttet til dette elementet. Så, hvis du gjør en super komplekse animasjoner, deretter Chrome-verktøy kan være en smidge mer nyttig.

Animasjon Inspektør Dokumentasjon

  • Gjennomgang på Google Developers –
  • Animasjon inspektør i Firefox – MDN