Animácie sú silným doplnkom CSS, ale ich textová forma môže sťažiť prácu s nimi. Nástroje pre vývojárov prehliadača Chrome na záchranu!
Animácie CSS, urobené správne, môžu pozdvihnúť vašu stránku na inú úroveň. Vytváranie týchto animácií však môže byť zložité bez nástrojov, ktoré nad nimi poskytujú jemnú kontrolu. Čo keby existoval spôsob, ako presne vidieť, čo sa deje na každom kroku vašej animácie?
Funkcia DevTools prehliadačov Google Chrome a Firefox prichádza s možnosťou kontrolovať vaše animácie. Naučte sa používať túto funkciu na vylepšenie vlastných animácií a spätné inžinierstvo vašich obľúbených animácií na webe.
DevTools prehliadača Chrome sú skvelým spôsobom odladiť všetky aspekty vášho CSS, a ďalšie. Začnite s týmto jednoduchým príkladom, aby ste pochopili, ako ho môžete použiť na kontrolu animácií.
Kód pre tieto príklady je dostupný v úložisko GitHub.
Definujte animácie pomocou HTML a CSS
Nasledujúci HTML vykresľuje stránku s dvoma prvkami: a a a. Stránka tiež importuje súbor CSS s názvom style.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>
Ak chcete upraviť oba prvky, vytvorte a style.css súbor v rovnakom priečinku ako HTML a pridajte nasledujúce:
#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;
}
}
Tieto štýly tvoria dve zložky:
- Jednoduchý box, ktorý sa pri načítaní stránky otáča a mení farbu.
- Tlačidlo, ktoré zmení farbu pozadia, keď naň umiestnite kurzor myši.
Všimnite si, že červený rámček sa animuje pomocou CSS direktíva @keyframe, pričom tlačidlo používa prechod. To vám umožní porovnať dva prístupy pomocou nástrojov DevTools prehliadača.
Pre prístup k Animácie v Chrome DevTools:
- Kliknutím pravým tlačidlom myši na svoju stránku zobrazíte kontextovú ponuku.
- Kliknite Skontrolujte.
- Kliknite na trojité bodky v pravom hornom rohu.
- Prejdite na Ďalšie nástroje > Animácie.
Tým sa otvorí zásuvka animácií v spodnej časti.
Tu sa zobrazia všetky animácie, ktoré sa vyskytnú na vašej stránke. Ak obnovíte stránku a umiestnite kurzor myši na tlačidlo, animácie sa zobrazia na karte animácií.
Skutočná sila príde, keď kliknete na jednu z týchto animácií. Ak napríklad kliknete na animáciu poľa, prehliadač zobrazí kľúčové snímky takto:
Nástroje DevTools zobrazujú všetky animácie súvisiace s prvkom, ktorý vyberiete. Keďže pre červený rámček je definovaná len jedna animácia –otočiť a zmeniť farbu– uvidíte len jeho detaily.
Môžete potiahnuť čiaru doľava, aby bola animácia oveľa rýchlejšia, alebo ju potiahnuť doprava, ak chcete animáciu spomaliť. Animáciu môžete v určitých bodoch pozastaviť prepnutím ikon pozastavenia a prehrávania. Percentá v hornej časti umožňujú prehrať animáciu štvrtinou normálnej rýchlosti a desatinou rýchlosti.
Keď skontrolujete prechod tlačidla, nástroje DevTools zobrazia jednotlivé vlastnosti prechodu: farbu a farbu pozadia.
Tento nástroj vám umožňuje manipulovať s animáciou, aby ste presne videli, ako funguje. Môžete to použiť na riešenie problémov na vašom webe ak sa vyskytnú nejaké problémy.
Príklady pokročilých animácií
Začnite tým, že nahradíte označenie v kóde HTML značka s nasledujúcim označením:
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>
Potom nahraďte všetky štýly vo svojom style.css súbor s týmto:
.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;
}
}
Všetko prvky majú pohyb v krokoch na ne aplikovaná animácia, ktorá mení polohu a farbu pozadia. Okrem toho má každé políčko inú animáciu na ovládanie počtu krokov, ktoré vykoná.
Zatiaľ čo sa tretie políčko plynule posúva doprava, prvé dva sa budú posúvať o dva kroky, kým sa všetky nedostanú na koniec obrazovky (pričom druhé políčko začína pred prvým políčkom).
Ak otvoríte Animácie v DevTools a obnovte stránku, nájdete všetky informácie týkajúce sa týchto animácií:
Existuje niekoľko prvkov, ktoré sa všetky animujú v rovnakom období. V tomto scenári sa farba pozadia a poloha poľa animujú súčasne pre všetky tri polia.
Ďalšia vec, ktorú treba poznamenať, sú uzly na každom riadku animácie. Keď sa animácia vyskytne nekonečne veľakrát, uzly ukazujú, kde každé opakovanie začína a končí v animácii.
Prázdne uzly sú v podstate kľúčové snímky vo vašej animácii, zatiaľ čo plné farebné uzly predstavujú začiatok a koniec animácie. Pri každom spustení animácie budete mať tmavé uzly.
Nakoniec môžete upravovať animácie pomocou nástrojov DevTools, rovnako ako pomocou akejkoľvek vlastnosti CSS. Všetky zmeny, ktoré vykonáte pomocou používateľského rozhrania animácie, sa zobrazia vo vložených štýloch pod Štýly kartu a naopak. To vám umožní vykonávať zmeny, testovať ich a kopírovať ich do vášho skutočného projektu.
Funkcia DevTools prehliadača Google Chrome je úžasný nástroj na ladenie CSS vrátane animácií. Poskytuje podrobný pohľad na každý prechod a animáciu na vašej stránke, takže presne vidíte, čo sa deje na každom kroku.
Ako webový vývojár by ste mali poznať funkciu DevTools vášho prehliadača alebo jej ekvivalent.
