Animācijas ir spēcīgs CSS papildinājums, taču to teksta forma var padarīt ar tām neērtu darbu. Chrome DevTools palīgā!
Pareizi izpildītas CSS animācijas var paaugstināt jūsu vietni citā līmenī. Taču šo animāciju izveide var būt sarežģīta bez rīkiem, kas nodrošina precīzu to kontroli. Kā būtu, ja būtu veids, kā precīzi redzēt, kas notiek katrā jūsu animācijas solī?
Google Chrome un Firefox funkcija DevTools ir aprīkota ar iespēju pārbaudīt jūsu animācijas. Uzziniet, kā izmantot šo funkciju, lai uzlabotu savas animācijas un mainītu iecienītākās animācijas tīmeklī.
Chrome DevTools ir lielisks veids, kā atkļūdot visus CSS aspektus, un vēl vairāk. Sāciet ar šo vienkāršo piemēru, lai saprastu, kā to izmantot, lai pārbaudītu animācijas.
Šo piemēru kods ir pieejams GitHub repozitorijs.
Definējiet animācijas, izmantojot HTML un CSS
Šis HTML atveido lapu ar diviem elementiem: a un a. Lapa arī importē CSS failu ar nosaukumu stils.css:
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>
Lai veidotu abus elementus, izveidojiet a stils.css failu tajā pašā mapē, kurā atrodas HTML, un pievienojiet šo:
#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;
}
}
Šie stili veido divus komponentus:
- Vienkāršs lodziņš, kas griežas un maina krāsu, kad lapa tiek ielādēta.
- Poga, kas maina fona krāsu, kad virzāt kursoru virs tās.
Ņemiet vērā, ka sarkanais lodziņš tiek animēts, izmantojot CSS @keyframe direktīva, savukārt pogai tiek izmantota pāreja. Tas ļauj salīdzināt abas pieejas, izmantojot pārlūkprogrammas DevTools.
Lai piekļūtu Animācijas cilne Chrome DevTools:
- Ar peles labo pogu noklikšķiniet uz savas lapas, lai atvērtu konteksta izvēlni.
- Klikšķis Pārbaudīt.
- Noklikšķiniet uz trīskāršajiem punktiem augšējā labajā stūrī.
- Dodieties uz Vairāk rīku > Animācijas.
Tas atvērs animācijas atvilktni apakšējā sadaļā.
Šeit tiks parādītas visas animācijas, kas parādās jūsu lapā. Ja atsvaidzināt savu lapu un virzāt kursoru uz pogas, animācijas tiks parādītas cilnē Animācijas.
Patiesais spēks rodas, noklikšķinot uz vienas no šīm animācijām. Piemēram, ja noklikšķināsit uz lodziņa animācijas, jūs redzēsit, ka pārlūkprogramma atslēgkadrus attēlo šādi:
DevTools parāda visas animācijas, kas saistītas ar atlasīto elementu. Tā kā sarkanajam lodziņam ir definēta tikai viena animācija —rotateAndChangeColor— jūs redzēsit tikai tās detaļas.
Varat vilkt līniju pa kreisi, lai padarītu animāciju daudz ātrāku, vai vilkt to pa labi, lai palēninātu animāciju. Varat arī apturēt animāciju noteiktos punktos, pārslēdzot pauzes un atskaņošanas ikonas. Augšpusē norādītie procenti ļauj atskaņot animāciju attiecīgi ar ceturtdaļu no tās parastā ātruma un vienu desmito daļu no ātruma.
Pārbaudot pogu pāreju, DevTools parādīs atsevišķas pārejas īpašības: krāsu un fona krāsu.
Šis rīks ļauj manipulēt ar animāciju, lai precīzi redzētu, kā tā darbojas. Jūs varat to izmantot, lai jūsu vietnes problēmu novēršana ja ir kādas problēmas.
Uzlabotas animācijas piemēri
Sāciet, aizstājot marķējumu savā HTML tagu ar šādu marķējumu:
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>
Pēc tam nomainiet visus stilus savā stils.css failu ar šo:
.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;
}
}
Visi elementiem ir pārvietošanās soļos tiem tiek piemērota animācija, kas pārceļ pozīciju un fona krāsu. Papildus tam katram lodziņam ir atšķirīga animācija, lai kontrolētu veicamo darbību skaitu.
Kamēr trešais lodziņš vienmērīgi slīd pa labi, pirmie divi pārvietosies pa diviem soļiem vienlaikus, līdz tie visi sasniegs ekrāna beigas (otrais lodziņš sākas pirms pirmā lodziņa).
Ja atverat Animācijas cilnē DevTools un atsvaidziniet lapu, jūs atradīsiet visu informāciju, kas attiecas uz šīm animācijām:
Ir vairāki elementi, kas visi animē vienā un tajā pašā laika posmā. Šajā scenārijā fona krāsa un lodziņa pozīcija tiek animēta vienlaikus visiem trim lodziņiem.
Vēl viena lieta, kas jāņem vērā, ir mezgli katrā animācijas rindā. Ja animācija notiek bezgalīgi daudz reižu, mezgli parāda, kur sākas un beidzas katrs atkārtojums animācijā.
Tukšie mezgli būtībā ir jūsu animācijas atslēgas kadri, savukārt vienkrāsaini, krāsaini mezgli apzīmē animācijas sākumu un beigas. Katru reizi, kad animācija sāksies no jauna, jums būs tumšas krāsas mezgli.
Visbeidzot, varat rediģēt animācijas, izmantojot DevTools, tāpat kā ar jebkuru CSS īpašumu. Visas izmaiņas, ko veicat, izmantojot animācijas lietotāja saskarni, tiks parādītas iekļautajos stilos zem Stili cilne un otrādi. Tas ļauj veikt izmaiņas, pārbaudīt tās un pārkopēt tās faktiskajā projektā.
Google Chrome DevTools funkcija ir lielisks rīks CSS, tostarp animāciju, atkļūdošanai. Tas nodrošina detalizētu pārskatu par katru pāreju un animāciju jūsu lapā, lai jūs varētu precīzi redzēt, kas notiek katrā solī.
Kā tīmekļa izstrādātājam jums ir jāzina sava pārlūkprogrammas DevTools funkcija vai tās ekvivalents.