Průvodce pro začátečníky k animaci SVG s CSS

Scalable Vector Graphics (SVG) jsou více než jen soubory obrázků. Jako XML aplikace obsahují SVG značky, které vypadají a fungují podobně jako HTML. Můžete je také použít ve spojení s kódem CSS a JavaScript. To umožňuje animovat soubory SVG a vytvářet složité obrázky, které dobře fungují pro webdesign a další dynamická prostředí.

Jak ale udělat SVG animaci? Začněte s tvarem SVG, animujte jej pomocí CSS a stavte na těchto principech, abyste mohli používat animaci ve své vlastní práci.

Animace SVG pomocí HTML a CSS

Ačkoli můžete použít JavaScript k programové animaci SVG, CSS nyní má dobrou podporu i pro animace. Celý ukázkový kód najdete na CodePen pro tento projekt.

Vytvoření obrázku SVG uvnitř HTML

Prvním krokem v tomto procesu je vytvoření obrazu SVG, se kterým budete pracovat. Označení SVG najdete na panelu HTML na CodePen.

Struktura SVG

Zatímco SVG sdílejí podobný formát jako HTML, značky, které používáte k jejich vytvoření, se liší. SVG má otevírací a uzavírací značky (), které mohou obsahovat řadu různých vlastností. V našem případě používáme

id a viewBox vlastnosti. Vlastnost id funguje jako jakékoli jiné HTML ID a poskytuje vám jedinečný identifikátor, který můžete použít ve svém CSS/JS. Vlastnost viewBox nastavuje velikost našeho SVG.

<!-- SVG s responzivní velikostí -->
<svg id="MUOSVGAanimace" viewBox="0 0 800 600">
<!-- Obsah SVG -->
</svg>

Místo toho můžete použít vlastnosti width a height, jak ukazuje následující příklad. ViewBox však vytváří responzivní SVG, které bude odpovídat velikosti výřezu, aniž by došlo k porušení jeho poměru stran.

 SVG s statickou velikostí 
<svg id="MUOSVGAanimace" šířka="800" výška ="600">
<!-- Obsah SVG -->
</svg>

Tvary SVG

Pomocí SVG můžete vytvářet detailní obrázky s řadou různých tvarových nástrojů, které máte k dispozici. Tento příklad SVG používá tři dostupné tvary, ale existuje mnoho dalších. Každý z tvarů v tomto příkladu má jedinečné ID, které mohou animace CSS použít později.

• SVG Elipsa: Toto je kruhový/oválný nástroj. Určuje vlastnosti pro poloměr osy y/x (rx/ry), barvu výplně a šířku tahu. Je důležité si pamatovat, že poloměr, který zvolíte pomocí tohoto nástroje, bude poloviční než průměr tvaru.

<elipsa id="kruh" rx="100" ry="100" vyplnit="#ffed00" šířka tahu="0"/>

• Obdélník SVG: Nástroj Obdélník SVG vytvoří čtverec nebo obdélník. Tento má vlastnosti pro šířku/výšku, transformaci, barvu výplně a šířku tahu.

<Rect id="náměstí" šířka="200" výška ="200" transformovat ="přeložit (300 200)" vyplnit="#05f"
 šířka tahu="0"/>

• Polygon SVG: Pomocí mnohoúhelníku SVG nastavte určitý počet bodů a vytvořte libovolné tvary různých velikostí. Mnohoúhelník v příkladu je třístranný, což z něj dělá trojúhelník, a polohu každého bodu můžete vidět zakreslenou v jeho vlastnostech. Spolu s tím máme vlastnosti pro polohu, barvu výplně a šířku tahu trojúhelníku.

<id polygonu="trojúhelník" body ="15,-97 115,102 -84,102 15,-97"
 transformovat ="přeložit (0,0)" vyplnit="#f00" šířka tahu="0"/>

Jakmile je animace na místě, tvary se seřadí vedle sebe.

Tyto tři tvary SVG jsou jedny z nejběžnějších, ale je jich více, ze kterých si můžete vybrat. Následující tvary můžete použít, když práce s SVG animací:

• Kruh SVG: Tento tvar je podobný elipse, ale má vždy stejné poloměry X a Y.
• Čára SVG: Čára SVG je jeden úsečka se dvěma body, po jednom na každém konci.
• SVG Polyline: Lomené čáry jsou jako základní čáry, pouze mohou mít více než dva body.
• Polygon SVG: Polygony SVG jsou jako obdélníky, pouze mohou mít více než čtyři body, což umožňuje složité tvary.
• Cesta SVG: Cesty SVG fungují podobně jako nástroj pero v Adobe Photoshopu. Čáry se mohou spojovat jako křivka/mnohoúhelník, ale mohou na ně být aplikovány křivky.

Jak animovat SVG pomocí CSS

Nyní, když máte ve svém SVG nějaké tvary, je čas přejít k animaci CSS. Každý z tvarů má jinou animaci, která demonstruje některé z možností, které máte, ale existuje spousta dalších, které můžete prozkoumat pomocí vlastních návrhů. Kruh se pohybuje po obrazovce, rohy čtverce se zakulacují a trojúhelník se otáčí. Všechny tyto použití CSS klíčové snímky pro vytvoření plynulých animací.

Přesouvání kruhu pomocí transformace a překladu

Kruh v příkladu SVG se během cyklu animace pohybuje zespodu do horní části obrazovky. Než se bude moci pohybovat, musíte ke kruhu přiřadit animaci prostřednictvím vlastnosti CSS:

#kruh {
 animace: circle_anim 2000 ms lineárně nekonečně normální dopředu
}

První slovo v hodnotě, circle_anim, je název pro animaci. Běží dvě sekundy (2000 ms). Má to lineární křivka, která udržuje svou rychlost konzistentní a je nastavena na běh an nekonečný kolikrát v vpřed směr. Pomocí klíčových snímků můžete definovat jednotlivé fáze animace:

@klíčové snímky circle_anim {
 0% { přeměnit: přeložit(155 pixelů, 305 pixelů) }
 45% { přeměnit: přeložit(155 pixelů, -123 pixelů) }
 50% { přeměnit: přeložit(-123 pixelů, -123 pixelů) }
 55% { přeměnit: přeložit(-123 pixelů, 728 pixelů) }
 60% { přeměnit: přeložit(155 pixelů, 728 pixelů) }
 100% { přeměnit: přeložit(155 pixelů, 305 pixelů) }
}

V této animaci je šest klíčových snímků, takže se kruh v každém cyklu přesune na šest různých míst. The transformovat: překládat vlastnost nastavuje polohu kruhu v každé fázi. Při 0 % je kruh uprostřed obrazovky a posune se nahoru a mimo zorné pole o 45 %. O 50 % se posunul doleva na obrazovce a poté se posunul dolů pod výřez na 55 %. Kruh se přesune zpět do vodorovné polohy o 60 % a animace je dokončena na 100 % s kruhem zpět uprostřed obrazovky.

Animujte vlastnost Border Radius na náměstí

Čtverec v příkladu nabízí dobrou referenci pro obecné animace vlastností. Pokud znáte správnou syntaxi, kterou chcete použít, můžete animovat libovolnou vlastnost CSS. Vlastnost border-radius je toho dobrým příkladem. Čtverec má ostré rohy, které se změní na zaoblené rohy a pak zase zpět na hranaté rohy.

#náměstí { animace: square_anim 2000 ms plynulý náběh nekonečně normální vpřed }

Čtvercová animace se nazývá square_anim a má dvousekundový běh. The easy-in-out křivka zpomalí animaci na jejím začátku a konci a vytvoří plynulý efekt.

@klíčové snímky square_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40 pixelů; ry: 40 pixelů }
 55% { rx: 40 pixelů; ry: 40 pixelů }
 100% { rx: 0px; ry: 0px }
}

Jak můžete vidět, tato animace má čtyři klíčové snímky. Poloměr ohraničení X a Y se změní z 0 pixelů na 40 pixelů mezi 0 % a 45 %, přičemž se pozastaví na 40 pixelech až na 55 %. Poté se vrátí na 0 pixelů pro každý poloměr v době, kdy animace dosáhne 100 %.

Otočte SVG trojúhelník s transformací

Poslední animace SVG v příkladu je nejjednodušší, s trojúhelníkem rotujícím kolem svého středu. Tvar každé dvě sekundy dokončí celou otáčku a pokračuje nekonečně. Má křivku náběhu, která má za následek zpomalení animace na konci. Animace se nazývá trojúhelník_anim.

#trojúhelník { animace: trojúhelník_anim 2000 ms zmírnění nekonečného normálního pohybu vpřed }

Tato animace má dva klíčové snímky, jeden na 0 % a druhý na 100 %. Vlastnost Transform Rotation otočí trojúhelník z 0 stupňů při 0 % na 360 stupňů při 100 %, čímž se vytvoří úplné otočení.

@klíčové snímky trojúhelník_anim {
 0% { přeměnit: přeložit(644 pixelů, 297 pixelů) točit se(0 stupňů) }
 100% { přeměnit: přeložit(644 pixelů, 297 pixelů) točit se(360 stupňů) }
}

Jak animovat další vlastnosti

Výše uvedené tři animace jsou dobrým výchozím bodem při práci s SVG, ale pravděpodobně to budete chtít posunout dále. Pravidlo animace CSS můžete použít k úpravě téměř jakékoli hodnoty vlastnosti, kterou můžete svému SVG přiřadit. To zahrnuje základní hodnoty, jako je velikost a umístění, stejně jako pokročilejší hodnoty, jako jsou okraje, stíny a režimy prolnutí.

Ve vzácných případech, kdy CSS tuto práci nezvládne, můžete k animaci obrázků SVG použít kód JavaScript. Jakmile se budete cítit připraveni udělat další krok se svými SVG, můžete najít spoustu průvodců, které vám s tím pomohou.

Vytváření vlastních SVG animací

Ať už jste webový designér, vývojář softwaru nebo jednoduše kreativní člověk, vytváření SVG animací může být zábavné a uspokojující. Na webu můžete najít spoustu zdrojů, které vám pomohou s webovou animací, jakmile se seznámíte se základy.

10 vzorů pozadí CSS, které můžete použít na svém webu

Přečtěte si další