Vodnik za začetnike po SVG animaciji s CSS

Razširljiva vektorska grafika (SVG) je več kot le slikovne datoteke. Kot aplikacija XML vsebuje SVG oznake, ki izgledajo in delujejo podobno kot HTML. Uporabite jih lahko tudi v povezavi s kodo CSS in JavaScript. To omogoča animiranje datotek SVG, ustvarjanje kompleksnih slik, ki dobro delujejo za spletno oblikovanje in druga dinamična okolja.

Toda kako narediti SVG animacijo? Začnite z obliko SVG, jo animirajte z uporabo CSS in nadgradite ta načela za uporabo animacije pri svojem delu.

Animiranje SVG s HTML in CSS

Čeprav lahko uporabite JavaScript za programsko animacijo SVG, ima CSS zdaj dobro podporo tudi za animacije. Vso vzorčno kodo lahko najdete na CodePen za ta projekt.

Izdelava slike SVG znotraj HTML

Prvi korak v tem procesu je izdelava slike SVG, s katero boste delali. Oznake SVG najdete na plošči HTML na CodePen.

Struktura SVG

Medtem ko imajo SVG podobno obliko kot HTML, so oznake, ki jih uporabite za njihovo ustvarjanje, drugačne. SVG ima odpiranje in zapiranje oznake (), ki lahko vsebuje različne lastnosti. V našem primeru uporabljamo

id in viewBox lastnosti. Lastnost id deluje kot kateri koli drug ID HTML in vam zagotavlja edinstven identifikator, ki ga lahko uporabite v svojem CSS/JS. Lastnost viewBox nastavi velikost našega SVG.

<!-- SVG z odzivno velikostjo -->
<svg id="MUOSVGAnimacija" viewBox="0 0 800 600">
<!-- Vsebina SVG -->
</svg>

Namesto tega lahko uporabite lastnosti širine in višine, kot prikazuje naslednji primer. Vendar viewBox ustvari odziven SVG, ki se bo ujemal z velikostjo vidnega polja, ne da bi porušil njegovo razmerje stranic.

 SVG s statično velikostjo 
<svg id="MUOSVGAnimacija" širina ="800" višina ="600">
<!-- Vsebina SVG -->
</svg>

SVG oblike

S SVG-ji lahko ustvarite podrobne slike z vrsto različnih orodij za oblike, ki so vam na voljo. Ta primer SVG uporablja tri oblike, ki so na voljo, vendar je veliko drugih. Vsaka od oblik v tem primeru ima edinstven ID, ki ga lahko animacije CSS uporabijo pozneje.

• SVG Ellipse: To je orodje za krog/oval. Določa lastnosti za polmer osi y/x (rx/ry), barvo polnila in širino poteze. Pomembno si je zapomniti, da bo polmer, ki ga izberete s tem orodjem, polovico premera oblike.

<id elipse="krog" rx="100" ry="100" fill="#ffed00" stroke-width="0"/>

• SVG Rect: Orodje SVG Rect ustvari kvadrat ali pravokotnik. Ta ima lastnosti za širino/višino, preoblikovanje, barvo polnila in širino poteze.

<rect id="kvadratni" širina ="200" višina ="200" transform ="prevedi (300 200)" fill="#05f"
 stroke-width="0"/>

• Poligon SVG: uporabite poligon SVG, da nastavite določeno število točk in ustvarite poljubne oblike različnih velikosti. Poligon v primeru je tristranski, zaradi česar je trikotnik, položaj vsake točke pa lahko vidite v njegovih lastnostih. Poleg tega imamo lastnosti za položaj, barvo polnila in širino poteze trikotnika.

<id poligona="trikotnik" točke ="15,-97 115,102 -84,102 15,-97"
 transform ="prevedi (0,0)" fill="#f00" stroke-width="0"/>

Ko je animacija na mestu, se oblike postavijo ena poleg druge.

Te tri oblike SVG so nekatere najpogostejše, vendar lahko izbirate med več. Ko lahko uporabite naslednje oblike delo z SVG animacijo:

• Krog SVG: ta oblika je podobna elipsi, vendar ima vedno enak polmer X in Y.
• Črta SVG: Črta SVG je en sam odsek z dvema točkama, po eno na vsakem koncu.
• Polilinija SVG: Polilinije so kot osnovne črte, le da imajo lahko več kot dve točki.
• Poligon SVG: Poligoni SVG so kot pravokotniki, le da imajo lahko več kot štiri točke, kar omogoča kompleksne oblike.
• Pot SVG: poti SVG delujejo podobno kot orodje pero v Adobe Photoshopu. Črte se lahko povezujejo kot polilinija/poligon, lahko pa imajo tudi krivulje.

Kako animirati SVG s CSS

Zdaj, ko imate v svojem SVG nekaj oblik, je čas, da preidete na animacijo CSS. Vsaka od oblik ima drugačno animacijo za prikaz nekaterih možnosti, ki jih imate, vendar je na voljo veliko več, ki jih lahko raziščete z lastnimi dizajni. Krog se premika po zaslonu, vogali kvadrata postanejo okrogli, trikotnik pa se vrti. Vse te uporabe Ključni okvirji CSS za ustvarjanje gladkih animacij.

Premikanje kroga z uporabo Transform and Translate

Krog v primeru SVG se med ciklom animacije premika od dna proti vrhu zaslona. Preden se lahko premakne, morate krogu dodeliti animacijo prek lastnosti CSS:

#krog {
 animacija: krog_anim 2000ms linearno neskončno normalno naprej
}

Prva beseda v vrednosti, krog_anim, je ime za animacijo. Deluje dve sekundi (2000 ms). Ima a linearna krivulja, ki ohranja svojo hitrost dosledno in je nastavljena za izvajanje an neskončno število krat v naprej smer. Za določitev posameznih faz animacije lahko uporabite ključne okvire:

@ključni okvirji krog_anim {
 0% { preoblikovati: prevesti(155 slikovnih pik, 305 slikovnih pik) }
 45% { preoblikovati: prevesti(155 slikovnih pik, -123 slikovnih pik) }
 50% { preoblikovati: prevesti(-123 slikovnih pik, -123 slikovnih pik) }
 55% { preoblikovati: prevesti(-123 slikovnih pik, 728 slikovnih pik) }
 60% { preoblikovati: prevesti(155 slikovnih pik, 728 slikovnih pik) }
 100% { preoblikovati: prevesti(155 slikovnih pik, 305 slikovnih pik) }
}

V tej animaciji je šest ključnih sličic, tako da se bo krog v vsakem ciklu premaknil na šest različnih lokacij. The transformirati: prevesti lastnost nastavi položaj kroga na vsaki stopnji. Pri 0 % je krog na sredini zaslona in se premakne navzgor in izven pogleda za 45 %. Za 50 % se je premaknila levo od zaslona, ​​preden se je premaknila navzdol pod vidno polje za 55 %. Krog se premakne nazaj v vodoravni položaj za 60 %, animacija pa je končana pri 100 % s krogom nazaj na sredini zaslona.

Animirajte lastnost mejnega radija kvadrata

Kvadrat v primeru ponuja dobro referenco za splošne animacije lastnosti. Dokler poznate pravilno sintakso za uporabo, lahko animirate katero koli lastnost CSS. Lastnost radij meje je dober dokaz tega. Kvadrat ima ostre vogale, ki se spremenijo v zaobljene vogale in nato spet v kvadratne vogale.

#kvadrat { animacija: square_anim 2000 ms ease-in-out neskončno normalno naprej }

Kvadratna animacija se imenuje square_anim in ima dve sekundi izvajanja. The enostavnost vnosa krivulja upočasni animacijo na njenem začetku in koncu, kar ustvarja gladek učinek.

@ključni okvirji square_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40 slikovnih pik; ry: 40 slikovnih pik }
 55% { rx: 40 slikovnih pik; ry: 40 slikovnih pik }
 100% { rx: 0px; ry: 0px }
}

Kot lahko vidite, ima ta animacija štiri ključne okvire. Polmer meje X in Y se spremeni od 0 slikovnih pik do 40 slikovnih pik med 0 % in 45 %, začasno pavza pri 40 slikovnih pikah do 55 %. Nato se vrne na 0px za vsak polmer, ko animacija doseže 100%.

Zavrtite trikotnik SVG s transformacijo

Končna animacija SVG v primeru je najpreprostejša, pri čemer se trikotnik vrti okoli svoje središčne točke. Oblika opravi popoln obrat vsaki dve sekundi in se nadaljuje neskončno. Ima krivuljo sproščanja, ki povzroči, da se animacija na koncu upočasni. Animacija se imenuje triangle_anim.

#trikotnik { animacija: triangle_anim 2000 ms ease-out neskončno normalno naprej }

Ta animacija ima dva ključna okvirja, enega pri 0 % in drugega pri 100 %. Lastnost Transform rotate obrne trikotnik iz 0 stopinj pri 0 % na 360 stopinj pri 100 %, kar ustvari popolno vrtenje.

@ključni okvirji triangle_anim {
 0% { preoblikovati: prevesti(644 slikovnih pik, 297 slikovnih pik) zavrtite(0 stopinj) }
 100% { preoblikovati: prevesti(644 slikovnih pik, 297 slikovnih pik) zavrtite(360 stopinj) }
}

Kako animirati druge lastnosti

Zgoraj opisane tri animacije so dobro izhodišče, ko delate s SVG-ji, vendar boste to verjetno želeli nadaljevati. S pravilom animiranja CSS lahko prilagodite skoraj vsako vrednost lastnosti, ki jo lahko dodelite svojemu SVG. To vključuje osnovne vrednosti, kot sta velikost in pozicioniranje, pa tudi naprednejše vrednosti, kot so obrobe, sence in načini mešanja.

V redkih primerih, ko CSS ne more opraviti svojega dela, lahko uporabite kodo JavaScript za animiranje slik SVG. Najdete lahko veliko vodnikov, ki vam bodo pri tem pomagali, ko boste pripravljeni narediti naslednji korak s svojimi SVG-ji.

Ustvarjanje lastnih SVG animacij

Ne glede na to, ali ste spletni oblikovalec, razvijalec programske opreme ali preprosto ustvarjalna oseba, je lahko izdelava animacij SVG zabavna in zadovoljiva. Po spletu lahko najdete veliko virov, ki vam lahko pomagajo pri spletni animaciji, ko se spoznate z osnovami.

10 vzorcev ozadja CSS, ki jih lahko uporabite na svojem spletnem mestu

Preberite Naprej