Share
Neste gang du setter sammen noen CSS3-baserte animasjoner, kan det hende du finner det nyttig å hoppe inn i Chrome Developer Tools og dra nytte av animasjonsinspeksjonen og tilpasningsfunksjonene. I dette raske tipset får du en oversikt over hvilke animasjonsverktøy som er tilgjengelige i Chrome, hvordan du får tilgang til dem og hva de kan gjøre for deg.
Når du går, hvis du vil ha noen CSS3-animasjoner for å teste hvert av verktøyene, kan du bruke denne pennen fra kurset vårt 10 CSS3 Prosjekter: UI og Layout:
Her er fullversjonen.
På en side med en CSS3-animasjon som kjører, åpner du først Chrome Developer Tools ved å gå Vis> Utvikler> Utviklerverktøy. Alternativt kan du også bruke en tastaturgenvei F12 eller CTRL + SHIFT + I.
Når dev-verktøyene er åpne, gå til menyen symbolisert av tre vertikale prikker øverst til høyre, og velg deretter Flere verktøy> Animasjoner som vist under:
Når du først åpner animasjonsfanen, ser du ikke noe innhold som er relatert til animasjonene dine. Du ser bare en melding som sier Lytter til animasjoner ... . Årsaken til dette er, for å kunne arbeide, må fanen allerede være åpen når siden først lastes inn.
For å la panelet fange opp informasjon om animasjonene, oppdater siden, så ser du dette:
Det lille farget grafikonet øverst til venstre representerer sidens animasjoner. Klikk på det ikonet for å åpne animasjonsinspeksjonsverktøyene:
Når animasjonene spilles, ser du det røde spillespillet som beveger seg over tidslinjen. Dette avspillingshode kan bli tatt med musen og manuelt skrubbet eller plassert på et bestemt punkt.
Hver linje på grensesnittet representerer en individuell animasjon på siden. Du vil legge merke til at hver linje har en porsjon med mørkere, mer mettet farge. Dette indikerer lengden på animasjonen, og lighter-segmentene som kommer etterpå, representerer animasjonen som gjentar seg selv.
Du ser også flere små sirkler langs hver animasjonslinje. Disse tilsvarer animasjonens nøkkelrammer. De mørke farget sirkler representerer begynnelsen og slutten av animasjonen, og de hule sirkler representerer interstitiell keyframes hvor som helst mellom.
Interstitial keyframes (keyframes mellom begynnelsen og slutten av hver animasjonssyklus) på hver linje kan trekkes til forskjellige posisjoner, og når du flytter dem, vil du se animasjonen i nettleservinduet endre timingen. Dette kan være bra for å eksperimentere med nøyaktig hvilket prosentpoeng en interstitial keyframe skal falle på.
Den vanskelige delen, men du vil ikke se noen oppdatering til koden i Styles fan mens du utfører disse forsøkene. I stedet, når du får dine interstitiale nøkkelrammer plassert på det riktige punktet, kan du manuelt finne ut hvilken prosentverdi en keyframe skal settes for å bruke.
Plasser spillehodet direkte over keyframen i spørsmålet, og du vil se et tidsstempel øverst til venstre på panelet som forteller deg hvor langt langs animasjonen du er i sekunder. Du kan da finne ut hvilken prosentandel denne tiden er av den totale animasjonsvarigheten. I eksemplet nedenfor er playhead på omtrent 1s av en 2s animasjon, så vi vet at denne keyframe er på 50%.
Det er andre endringer du kan gjøre i animasjoner fan det vil oppdater koden din i Styles fanen slik at du kan se nøyaktig hvilke verdier som skal transplanteres i CSS. Den første av disse er forsinkelsen før en animasjon begynner å spille, og den andre er dens varighet.
For å justere forsinkelsen før en animasjon spilles, svinger du over linjen til du ser en håndformet markør, og dra deretter horisontalt. Du vil se oppdateringsforsinkelsesverdien i Styles tab:
Hvis du vil endre animasjonens varighet, svinger du over den siste keyframe til du ser en pilmarkør med dobbelt ende, og dra deretter horisontalt. Igjen, vil verdien bli sett oppdatering i Styles tab.
Du kan også bruke Chrome's dev-verktøy for å endre hastighetskurven som styrer animasjonens timing. Begynn med å inspisere et element som har en animasjon som er brukt på den. Til venstre for den angitte timingsfunksjonen vil du se en liten boks med en "squiggle" i den. Klikk på den for å åpne den kubiske bezier editoren:
En boks vil åpne som viser deg en bezierkurve som illustrerer gjeldende tidsfunksjon. Herfra kan du velge en eksisterende forhåndsinnstilling ved å klikke på en av miniatyrbildene til venstre, eller du kan dra håndtakene til hovedkurvbildet rundt og lage en tilpasset cubic-bezier-verdi som du senere kan kopiere til CSS:
Når du går sammen, ser du en liten lilla ball animering fra venstre til høyre over toppen av redaktøren, noe som gir deg en forhåndsvisning av timing-funksjonen din i handling.
Lær mer om bezier kurver og timing funksjoner i denne kaffepause kurset:
En annen ekstra nyttig funksjon er evnen til å visualisere lagene som brukes i animasjonen, inkludert muligheten til å rotere visualiseringen og se på den fra ulike vinkler for å bedre forstå hvordan ting fungerer.
Å åpne lag panelet, gå til Chrome Dev Tools-menyen og velg Flere verktøy> Lag.
Først når lag kategorien er åpen, velg Roter modus verktøy øverst til venstre:
Du kan nå bruke dette verktøyet til å rotere lagvisualiseringen i en hvilken som helst vinkel du trenger for å se hvordan delene av animasjonen din fungerer:
La oss få et raskt sammendrag av Chrome's animasjonsverktøy:
Noen ganger kan du lage et animasjonsutseende akkurat, det kan være en veldig presis og finaktig prosess. Disse verktøyene kan gi mye nødvendig innsikt i animasjonene dine, i tillegg til sanntids tilbakemelding, for å hjelpe deg med å få alt perfekt.
Accentsconagua