Animacije so močan dodatek k CSS, vendar je zaradi njihove besedilne oblike delo z njimi lahko neprijetno. Chromova orodja DevTools na pomoč!

Pravilno izvedene animacije CSS lahko povzdignejo vaše spletno mesto na drugo raven. Toda ustvarjanje teh animacij je lahko težavno brez orodij, ki zagotavljajo natančen nadzor nad njimi. Kaj pa, če bi obstajal način, da natančno vidite, kaj se dogaja na vsakem koraku vaše animacije?

Funkcija DevTools v Google Chromu in Firefoxu omogoča pregled vaših animacij. Naučite se uporabljati to funkcijo za izboljšanje lastnih animacij in povratnega inženiringa vaših najljubših animacij v spletu.

Chromova orodja DevTools so odličen način za odpravite napake v vseh vidikih vašega CSS, in še več. Začnite s tem preprostim primerom, da boste razumeli, kako ga lahko uporabite za pregledovanje animacij.

Koda za te primere je na voljo v repozitorij GitHub.

Definirajte animacije s HTML in CSS

Naslednji HTML upodobi stran z dvema elementoma: a in a. Stran uvozi tudi datoteko CSS z imenom style.css:

instagram viewer 
html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<linkrel="stylesheet"href="style.css">
head>
<body>
<divid="box">div>
<button>Test Buttonbutton>
body>
html>

Če želite oblikovati oba elementa, ustvarite a style.css v isti mapi kot HTML in dodajte naslednje:

#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000msease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1pxsolidblack;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100msease-in-out, color 100msease-in-out;
cursor: pointer;
}


button:hover {
background-color: black;
color: white;
}


@keyframes rotateAndChangeColor {
 0% {
rotate: 0deg;
background: red;
 }
 10% {
background: green;
 }
 40% {
background: blue;
 }
 70% {
background: yellow;
 }
 100% {
rotate: 360deg;
background: red;
 }
}

Ti slogi ustvarjajo dve komponenti:

  • Preprosta škatla, ki se vrti in spreminja barvo, ko se stran naloži.
  • Gumb, ki spremeni barvo ozadja, ko premaknete miškin kazalec nad njim.

Upoštevajte, da rdeče polje animira z uporabo Direktiva CSS @keyframe, gumb pa uporablja prehod. To vam omogoča primerjavo obeh pristopov z orodji DevTools brskalnika.

Za dostop do Animacije zavihek v Chromovih razvijalskih orodjih:

  1. Z desno miškino tipko kliknite svojo stran, da odprete kontekstni meni.
  2. Kliknite Preglejte.
  3. Kliknite na trojne pike v zgornjem desnem kotu.
  4. Pojdite na Več orodij > Animacije.

To bo odprlo predal za animacijo v spodnjem delu.

Vse animacije, ki se pojavijo na vaši strani, bodo prikazane tukaj. Če osvežite svojo stran in premaknete miškin kazalec na gumb, se bodo animacije prikazale pod zavihkom animacije.

Prava moč se pojavi, ko kliknete eno od teh animacij. Če na primer kliknete animacijo polja, boste videli, da brskalnik ključne sličice predstavlja takole:

Orodja DevTools prikažejo vse animacije v zvezi z elementom, ki ga izberete. Ker je za rdeče polje definirana samo ena animacija –rotateAndChangeColor— videli boste le njegove podrobnosti.

Črto lahko povlečete v levo, da bo animacija veliko hitrejša, ali jo povlečete v desno, da upočasnite animacijo. Animacijo lahko na določenih točkah tudi zaustavite tako, da preklopite ikoni za premor in predvajanje. Odstotki na vrhu vam omogočajo predvajanje animacije s četrtino običajne hitrosti oziroma z eno desetino hitrosti.

Ko pregledate prehod gumba, bodo DevTools prikazale posamezne lastnosti prehoda: barvo in barvo ozadja.

To orodje vam omogoča, da manipulirate z animacijo, da natančno vidite, kako deluje. Lahko ga uporabite za odpravite težave z vašim spletnim mestom če so kakšne težave.

Napredni primeri animacij

Začnite tako, da zamenjate oznako v svojem HTML-ju oznako z naslednjo oznako:


class="move-me move-me-1">steps(4, end)</div>
<br />

class="move-me move-me-2">steps(4, start)</div>
<br />

class="move-me move-me-3">no steps</div>

Nato zamenjajte vse sloge v svojem style.css datoteka s tem:

.move-me {
display: inline-block; 
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8ssteps(4, end) infinite;
}


.move-me-2 {
animation: move-in-steps 8ssteps(4, start) infinite;
}


.move-me-3 {
animation: move-in-steps 8sinfinite;
}


body {
padding: 20px;
}


@keyframes move-in-steps {
 0% {
left: 0;
background: blue;
 }
 100% {
left: 100%;
background: red;
 }
}

Vse elementi imajo premikanje po korakih nanje uporabljena animacija, ki spreminja položaj in barvo ozadja. Poleg tega ima vsako polje drugačno animacijo za nadzor števila korakov, ki jih bo naredil.

Medtem ko tretje polje enakomerno drsi v desno, se bosta prvi dve premaknili za dva koraka naenkrat, dokler vsi ne dosežejo konca zaslona (pri čemer se drugo polje začne pred prvim poljem).

Če odprete Animacije v DevTools in osvežite stran, boste našli vse informacije v zvezi s temi animacijami:

Obstaja več elementov, ki vsi animirajo v istem obdobju. V tem scenariju se barva ozadja in položaj polja animirata hkrati za vsa tri polja.

Druga stvar, ki jo je treba opozoriti, so vozlišča v vsaki vrstici animacije. Ko se animacija pojavi neskončno število krat, vozlišča pokažejo, kje se vsako ponavljanje začne in konča v animaciji.

Prazna vozlišča so v bistvu ključne sličice v vaši animaciji, medtem ko polna barvna vozlišča predstavljajo začetek in konec animacije. Imeli boste temno obarvana vozlišča vsakič, ko se vaša animacija začne znova.

Končno lahko urejate animacije z orodji DevTools, tako kot lahko s katero koli lastnostjo CSS. Vse spremembe, ki jih naredite z uporabniškim vmesnikom za animacijo, bodo prikazane v vgrajenih slogih pod Slogi zavihek in obratno. To vam omogoča, da naredite spremembe, jih preizkusite in kopirate v svoj dejanski projekt.

Funkcija DevTools v brskalniku Google Chrome je odlično orodje za odpravljanje napak v vašem CSS, vključno z animacijami. Zagotavlja podroben pregled vsakega prehoda in animacije na vaši strani, tako da lahko natančno vidite, kaj se dogaja na vsakem koraku.

Kot spletni razvijalec morate poznati funkcijo DevTools vašega brskalnika ali njeno enakovredno funkcijo.