Vodič za početnike za SVG animaciju s CSS-om

Skalabilna vektorska grafika (SVG) više je od slikovnih datoteka. Kao XML aplikacija, SVG-ovi sadrže oznake koje izgledaju i rade slično kao HTML. Također ih možete koristiti u kombinaciji s CSS i JavaScript kodom. To omogućuje animiranje SVG datoteka, stvaranje složenih slika koje dobro funkcioniraju za web dizajn i druga dinamička okruženja.

Ali kako napraviti SVG animaciju? Započnite sa SVG oblikom, animirajte ga pomoću CSS-a i nadogradite se na ovim principima kako biste koristili animaciju u svom radu.

Animiranje SVG-ova pomoću HTML-a i CSS-a

Iako možete koristiti JavaScript za programski animiranje SVG-ova, CSS sada ima dobru podršku i za animacije. Možete pronaći sav uzorak koda na CodePen za ovaj projekt.

Izrada SVG slike unutar HTML-a

Prvi korak u ovom procesu je izgradnja SVG slike s kojom ćete raditi. SVG oznake možete pronaći na HTML ploči na CodePenu.

SVG struktura

Dok SVG-ovi dijele sličan format kao HTML, oznake koje koristite za njihovu izradu su različite. SVG ima oznake za otvaranje i zatvaranje () koji mogu sadržavati niz različitih svojstava. U našem slučaju koristimo se

iskaznica i viewBox Svojstva. Svojstvo id funkcionira kao i svaki drugi HTML ID, pružajući vam jedinstveni identifikator za korištenje u svom CSS/JS. Svojstvo viewBox postavlja veličinu našeg SVG-a.

<!-- SVG s responzivnom veličinom -->
<svg id="MUOSVGAnimacija" viewBox="0 0 800 600">
<!-- SVG sadržaj -->
</svg>

Umjesto toga možete koristiti svojstva širine i visine, kao što pokazuje sljedeći primjer. Međutim, viewBox stvara responzivni SVG koji će odgovarati veličini okvira za prikaz bez narušavanja njegovog omjera.

 SVG s statičnom veličinom 
<svg id="MUOSVGAnimacija" širina="800" visina="600">
<!-- SVG sadržaj -->
</svg>

SVG oblici

Možete kreirati detaljne slike sa SVG-ovima, s nizom različitih alata za oblike koji su vam na raspolaganju. Ovaj SVG primjer koristi tri dostupna oblika, ali postoje i mnogi drugi. Svaki od oblika u ovom primjeru ima jedinstveni ID koji CSS animacije mogu kasnije koristiti.

• SVG elipsa: Ovo je alat za krug/oval. Određuje svojstva za polumjer osi y/x (rx/ry), boju ispune i širinu poteza. Važno je zapamtiti da će polumjer koji odaberete s ovim alatom biti polovica promjera oblika.

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

• SVG Rect: SVG rect alat stvara kvadrat ili pravokutnik. Ovaj ima svojstva za širinu/visinu, transformaciju, boju ispune i širinu poteza.

<rect id="kvadrat" širina="200" visina="200" transformirati="prevedi (300 200)" ispuniti="#05f"
 stroke-width="0"/>

• SVG poligon: Koristite SVG poligon za postavljanje određenog broja točaka i stvaranje proizvoljnih oblika različitih veličina. Poligon u primjeru je trostran, što ga čini trokutom, a položaj svake točke možete vidjeti u njegovim svojstvima. Uz to, imamo svojstva za položaj, boju ispune i širinu poteza trokuta.

<poligon id="trokut" bodova="15,-97 115,102 -84,102 15,-97"
 transformirati="prevedi (0,0)" ispuniti="#f00" stroke-width="0"/>

Nakon što je animacija na mjestu, oblici će se poredati jedan pored drugog.

Ova tri SVG oblika neki su od najčešćih, ali možete birati između više. Možete koristiti sljedeće oblike kada rad sa SVG animacijom:

• SVG krug: Ovaj oblik je sličan elipsi, ali uvijek ima jednake polumjere X i Y.
• SVG linija: SVG linija je pojedinačni segment s dvije točke, po jednu na svakom kraju.
• SVG polilinija: Polilinije su poput osnovnih linija, samo što mogu imati više od dvije točke.
• SVG poligon: SVG poligoni su poput pravokutnika, samo što mogu imati više od četiri točke, što omogućuje složene oblike.
• SVG put: SVG putovi rade slično kao alat za olovku u Adobe Photoshopu. Linije se mogu povezati poput polilinije/poligona, ali također mogu imati krivulje primijenjene na njih.

Kako animirati SVG-ove pomoću CSS-a

Sada kada imate neke oblike unutar svog SVG-a, vrijeme je da prijeđete na CSS animaciju. Svaki od oblika ima drugačiju animaciju koja pokazuje neke od opcija koje imate, ali postoji mnogo više za istražiti s vlastitim dizajnom. Krug se pomiče po ekranu, kutovi kvadrata postaju okrugli, a trokut se rotira. Svi ovi koriste CSS ključni okviri za stvaranje glatkih animacija.

Pomicanje kruga pomoću Transform and Translate

Krug u SVG primjeru pomiče se od dna prema vrhu zaslona tijekom ciklusa animacije. Morate dodijeliti animaciju krugu prije nego što se može pomicati, putem CSS svojstva:

#krug {
 animacija: circle_anim 2000ms linearno beskonačno normalno naprijed
}

Prva riječ u vrijednosti, krug_anim, je naziv za animaciju. Radi dvije sekunde (2000 ms). Ono ima linearni krivulja koja svoju brzinu održava dosljednom i postavljena je za pokretanje an beskonačan broj puta u naprijed smjer. Možete koristiti ključne kadrove za definiranje pojedinačnih faza animacije:

@ključni okviri krug_anim {
 0% { transformirati: Prevedi(155 piksela, 305 piksela) }
 45% { transformirati: Prevedi(155 piksela, -123 piksela) }
 50% { transformirati: Prevedi(-123 piksela, -123 piksela) }
 55% { transformirati: Prevedi(-123 piksela, 728 piksela) }
 60% { transformirati: Prevedi(155 piksela, 728 piksela) }
 100% { transformirati: Prevedi(155 piksela, 305 piksela) }
}

U ovoj animaciji postoji šest ključnih kadrova, tako da će se krug pomaknuti na šest različitih mjesta u svakom ciklusu. The transformirati: prevesti svojstvo postavlja položaj kruga u svakoj fazi. Pri 0% krug je u sredini zaslona i pomiče se gore i izvan vidokruga za 45%. Za 50% se pomaknuo lijevo od zaslona prije nego što se pomaknuo ispod okvira za prikaz na 55%. Krug se vraća u vodoravni položaj za 60%, a animacija je gotova na 100% s krugom natrag u sredini zaslona.

Animirajte svojstvo radijusa granice kvadrata

Kvadrat u primjeru nudi dobru referencu za općenite animacije svojstava. Sve dok znate ispravnu sintaksu za korištenje, možete animirati bilo koje CSS svojstvo. Svojstvo radijusa granice dobra je demonstracija ovoga. Kvadrat ima oštre kutove koji se pretvaraju u zaobljene kutove, a zatim opet u četvrtaste kutove.

#kvadrat { animacija: square_anim 2000 ms beskonačni normalni prema naprijed }

Kvadratna animacija naziva se square_anim i ima vrijeme izvođenja od dvije sekunde. The lakoća ulaska krivulja čini animaciju sporijom na početku i na kraju, stvarajući glatki efekt.

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

Kao što možete vidjeti, ova animacija ima četiri ključna okvira. Radijus granice X i Y mijenja se od 0px do 40px između 0% i 45%, pauzirajući na 40px do 55%. Zatim se vraća na 0px za svaki radijus do trenutka kada animacija dosegne 100%.

Zarotirajte SVG trokut s transformacijom

Konačna SVG animacija u primjeru je najjednostavnija, s trokutom koji se rotira oko svoje središnje točke. Oblik dovršava punu revoluciju svake dvije sekunde i nastavlja raditi beskonačno. Ima krivulju opuštanja koja rezultira usporavanjem animacije na kraju. Animacija se zove triangle_anim.

#trokut { animacija: trokut_anim 2000 ms ease-out beskonačni normalni naprijed }

Ova animacija ima dva ključna okvira, jedan na 0%, a drugi na 100%. Svojstvo Transform rotate okreće trokut od 0 stupnjeva na 0% do 360 stupnjeva na 100%, stvarajući potpuni okret.

@ključni okviri trokut_anim {
 0% { transformirati: Prevedi(644 piksela, 297 piksela) rotirati(0 stupnjeva) }
 100% { transformirati: Prevedi(644 piksela, 297 piksela) rotirati(360 stupnjeva) }
}

Kako animirati ostala svojstva

Tri gore pokrivene animacije dobra su početna točka kada radite sa SVG-ovima, no vjerojatno ćete to htjeti dalje pogurati. Možete koristiti CSS pravilo animiranja za podešavanje gotovo svake vrijednosti svojstva koju možete dodijeliti svom SVG-u. To uključuje osnovne vrijednosti, poput veličine i pozicioniranja, kao i naprednije vrijednosti, kao što su obrube, sjene i načini miješanja.

U rijetkim slučajevima kada CSS ne može obaviti posao, možete koristiti JavaScript kod za animiranje SVG slika. Možete pronaći mnoštvo vodiča koji će vam pomoći u tome kada se osjećate spremnim za sljedeći korak sa svojim SVG-ovima.

Izrada vlastitih SVG animacija

Bilo da ste web dizajner, programer softvera ili jednostavno kreativna osoba, izrada SVG animacija može biti zabavna i zadovoljavajuća. Na webu možete pronaći mnoštvo resursa koji vam mogu pomoći s animacijom temeljenom na webu, nakon što se upoznate s osnovama.

10 CSS pozadinskih uzoraka koje možete koristiti na svojoj web stranici

Pročitajte dalje