Príručka pre začiatočníkov k animácii SVG s CSS

Škálovateľná vektorová grafika (SVG) je viac než len obrazové súbory. Ako XML aplikácia obsahujú SVG značky, ktoré vyzerajú a fungujú podobne ako HTML. Môžete ich použiť aj v spojení s kódom CSS a JavaScript. To umožňuje animovať súbory SVG, vytvárať zložité obrázky, ktoré dobre fungujú pri webdizajne a iných dynamických prostrediach.

Ale ako urobíte SVG animáciu? Začnite s tvarom SVG, animujte ho pomocou CSS a stavte na týchto princípoch, aby ste mohli používať animáciu vo svojej vlastnej práci.

Animácia SVG pomocou HTML a CSS

Hoci na programovú animáciu SVG môžete použiť JavaScript, CSS má teraz dobrú podporu aj pre animácie. Celý vzorový kód nájdete na CodePen pre tento projekt.

Vytvorenie obrázka SVG vo vnútri HTML

Prvým krokom v tomto procese je vytvorenie obrázka SVG, s ktorým budete pracovať. Označenie SVG nájdete na paneli HTML na CodePen.

Štruktúra SVG

Zatiaľ čo súbory SVG majú podobný formát ako HTML, značky, ktoré používate na ich vytvorenie, sa líšia. SVG má otváracie a zatváracie značky (), ktoré môžu obsahovať množstvo rôznych vlastností. V našom prípade používame

id a viewBox vlastnosti. Vlastnosť id funguje ako akékoľvek iné HTML ID a poskytuje vám jedinečný identifikátor, ktorý môžete použiť vo svojom CSS/JS. Vlastnosť viewBox nastavuje veľkosť nášho SVG.

<!-- SVG s responzívnou veľkosťou -->
<svg id="MUOSVGAanimácia" viewBox="0 0 800 600">
<!-- Obsah SVG -->
</svg>

Namiesto toho môžete použiť vlastnosti width a height, ako ukazuje nasledujúci príklad. ViewBox však vytvorí responzívny SVG, ktorý bude zodpovedať veľkosti výrezu bez narušenia jeho pomeru strán.

 SVG s statickou veľkosťou 
<svg id="MUOSVGAanimácia" šírka ="800" výška ="600">
<!-- Obsah SVG -->
</svg>

Tvary SVG

Pomocou SVG môžete vytvárať podrobné obrázky s množstvom rôznych nástrojov na tvarovanie, ktoré máte k dispozícii. Tento príklad SVG používa tri dostupné tvary, ale existuje mnoho ďalších. Každý z tvarov v tomto príklade má jedinečné ID, ktoré môžu CSS animácie použiť neskôr.

• SVG Elipsa: Toto je kruhový/oválny nástroj. Špecifikuje vlastnosti pre polomer osi y/x (rx/ry), farbu výplne a šírku ťahu. Je dôležité si zapamätať, že polomer, ktorý si zvolíte s týmto nástrojom, bude polovica priemeru tvaru.

<id elipsy="kruh" rx="100" ry="100" fill="#ffed00" šírka ťahu="0"/>

• SVG Rect: Nástroj SVG rect vytvorí štvorec alebo obdĺžnik. Tento má vlastnosti pre šírku/výšku, transformáciu, farbu výplne a šírku ťahu.

<Rect id="námestie" šírka ="200" výška ="200" transformovať ="preložiť (300 200)" fill="#05f"
 šírka ťahu="0"/>

• Polygón SVG: Pomocou mnohouholníka SVG nastavte konkrétny počet bodov a vytvorte ľubovoľné tvary rôznych veľkostí. Mnohouholník v príklade je trojstranný, čo z neho robí trojuholník a polohu každého bodu môžete vidieť zakreslenú v jeho vlastnostiach. Spolu s tým máme vlastnosti pre polohu, farbu výplne a šírku ťahu trojuholníka.

<polygón id="trojuholník" body ="15,-97 115,102 -84,102 15,-97"
 transformovať ="preložiť (0,0)" fill="#f00" šírka ťahu="0"/>

Keď je animácia na mieste, tvary sa zoradia vedľa seba.

Tieto tri tvary SVG sú jedny z najbežnejších, no je ich viac, z ktorých si môžete vybrať. Nasledujúce tvary môžete použiť, keď práca s SVG animáciou:

• Kruh SVG: Tento tvar je podobný elipse, ale vždy má rovnaké polomery X a Y.
• Čiara SVG: Čiara SVG je jeden úsečka s dvoma bodmi, po jednom na každom konci.
• SVG Polyline: Polyline sú ako základné čiary, len môžu mať viac ako dva body.
• Polygón SVG: Polygóny SVG sú ako obdĺžniky, len môžu mať viac ako štyri body, čo umožňuje zložité tvary.
• Cesta SVG: Cesty SVG fungujú podobne ako nástroj pero v Adobe Photoshop. Čiary sa môžu spájať ako lomená čiara/mnohouholník, ale môžu na ne byť aplikované aj krivky.

Ako animovať SVG pomocou CSS

Teraz, keď máte vo svojom SVG nejaké tvary, je čas prejsť na animáciu CSS. Každý z tvarov má inú animáciu na demonštráciu niektorých možností, ktoré máte, ale existuje veľa ďalších, ktoré môžete preskúmať pomocou vlastných návrhov. Kruh sa pohybuje po obrazovke, rohy štvorca sa zaobľujú a trojuholník sa otáča. Všetky tieto využitie CSS kľúčové snímky na vytváranie plynulých animácií.

Posúvanie kruhu pomocou transformácie a prekladu

Kruh v príklade SVG sa počas cyklu animácie pohybuje zdola nahor. Kruhu musíte pred jeho pohybom priradiť animáciu prostredníctvom vlastnosti CSS:

#circle {
 animácia: circle_anim 2000 ms lineárne nekonečné normálne dopredu
}

Prvé slovo v hodnote, circle_anim, je názov pre animáciu. Beží dve sekundy (2000 ms). Má a lineárne krivka, ktorá si udržuje konštantnú rýchlosť a je nastavená na spustenie an nekonečné koľkokrát v dopredu smer. Pomocou kľúčových snímok môžete definovať jednotlivé fázy animácie:

@kľúčové snímky circle_anim {
 0% { transformovať: preložiť(155 pixelov, 305 pixelov) }
 45% { transformovať: preložiť(155 pixelov, -123 pixelov) }
 50% { transformovať: preložiť(-123 pixelov, -123 pixelov) }
 55% { transformovať: preložiť(-123 pixelov, 728 pixelov) }
 60% { transformovať: preložiť(155 pixelov, 728 pixelov) }
 100% { transformovať: preložiť(155 pixelov, 305 pixelov) }
}

V tejto animácii je šesť kľúčových snímok, takže kruh sa v každom cykle presunie na šesť rôznych miest. The premeniť: preložiť vlastnosť nastavuje polohu kruhu v každej fáze. Pri 0 % je kruh v strede obrazovky a posunie sa nahor a mimo zorného poľa o 45 %. O 50 % sa posunul doľava na obrazovke a potom sa presunul nadol pod výrez na 55 %. Kruh sa presunie späť do svojej horizontálnej polohy o 60 % a animácia sa dokončí na 100 % s kruhom späť v strede obrazovky.

Animujte objekt Border Radius Property

Štvorec v príklade ponúka dobrú referenciu pre všeobecné animácie vlastností. Pokiaľ poznáte správnu syntax na použitie, môžete animovať akúkoľvek vlastnosť CSS. Vlastnosť border-radius je toho dobrým dôkazom. Štvorec má ostré rohy, ktoré sa zmenia na zaoblené rohy a potom späť na hranaté rohy.

#námestie { animácie: square_anim 2000 ms uvoľnenie nekonečno normálne dopredu }

Štvorcová animácia sa nazýva square_anim a trvá dve sekundy. The easy-in-out krivka spomalí animáciu na jej začiatku a konci, čím vytvorí plynulý efekt.

@kľúčové snímky square_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40 pixelov; ry: 40 pixelov }
 55% { rx: 40 pixelov; ry: 40 pixelov }
 100% { rx: 0px; ry: 0px }
}

Ako vidíte, táto animácia má štyri kľúčové snímky. Polomer okrajov X a Y sa mení z 0 pixelov na 40 pixelov medzi 0 % a 45 %, pričom sa pozastaví na 40 pixeloch až po 55 %. Potom sa vráti na 0 pixelov pre každý polomer v čase, keď animácia dosiahne 100 %.

Otočte trojuholník SVG pomocou transformácie

Posledná animácia SVG v príklade je najjednoduchšia, pričom trojuholník sa otáča okolo svojho stredu. Tvar dokončí celú otáčku každé dve sekundy a pokračuje nekonečne. Má krivku uvoľnenia, čo vedie k spomaleniu animácie na konci. Animácia sa nazýva trojuholník_anim.

#trojuholník { animácie: trojuholník_anim 2000 ms uvoľnenie nekonečné normálne dopredu }

Táto animácia má dve kľúčové snímky, jednu pri 0 % a druhú pri 100 %. Vlastnosť Transform Rotation otočí trojuholník z 0° pri 0% na 360° pri 100%, čím sa vytvorí úplné otočenie.

@kľúčové snímky trojuholník_anim {
 0% { transformovať: preložiť(644 pixelov, 297 pixelov) točiť sa(0 stupňov) }
 100% { transformovať: preložiť(644 pixelov, 297 pixelov) točiť sa(360 stupňov) }
}

Ako animovať ďalšie vlastnosti

Tri vyššie uvedené animácie sú dobrým východiskovým bodom pri práci s SVG, ale pravdepodobne to budete chcieť posunúť ďalej. Pravidlo animácie CSS môžete použiť na úpravu takmer akejkoľvek hodnoty vlastnosti, ktorú môžete priradiť svojmu SVG. To zahŕňa základné hodnoty, ako je veľkosť a umiestnenie, ako aj pokročilejšie hodnoty, ako sú okraje, tiene a režimy prelínania.

V zriedkavých prípadoch, keď CSS túto úlohu nezvládne, môžete na animáciu obrázkov SVG použiť kód JavaScript. Môžete nájsť množstvo sprievodcov, ktoré vám s tým pomôžu, keď sa budete cítiť pripravení urobiť ďalší krok so svojimi SVG.

Vytváranie vlastných SVG animácií

Či už ste webový dizajnér, vývojár softvéru alebo jednoducho kreatívny človek, vytváranie animácií SVG môže byť zábavné a uspokojujúce. Na webe môžete nájsť množstvo zdrojov, ktoré vám môžu pomôcť s webovou animáciou, keď sa zoznámite so základmi.

10 vzorov pozadia CSS, ktoré môžete použiť na svojom webe

Prečítajte si ďalej