Kako stvoriti SVG animaciju pomoću CSS-a
Animiranje SVG-a može se obaviti preko izvornih elemenata kao što je
CSS Animacija također može biti alternativni način korištenja JavaScript biblioteke kao što je SnapSVG. U ovom postu vidjet ćemo što možemo isporučiti s CSS animacijom u SVG-u.
1. Stvaranje oblika
Prije svega, morat ćemo nacrtati oblike i objekte koje želimo animirati. Možete koristiti takve aplikacije Skica, Adobe Illustrator, ili Inkscape stvoriti.
Za ovaj primjer, nacrtao sam oblačno nebo kao pozadinu, a raketni brod pucao prema gore, plamen uključen:
Kad završimo s crtanjem, moramo izvesti svaki objekt koji smo stvorili u SVG.
Koristit ću Sketch kao primjer za ovaj korak. Odaberite objekt koji želite pretvoriti u SVG format. U donjem desnom dijelu prozora kliknite Omogući izvoz. Odaberite SVG format, a zatim kliknite Izvezi ime-objekta. Morate raditi ovaj jedan objekt u isto vrijeme.
2. Umetnite SVG u HTML
Kada otvorite SVG datoteku u uređivaču koda, otkrit ćete da su SVG kodovi prilično neuredni. Stoga, prije nego instaliramo SVG datoteku, pospremimo kôd i optimiziramo ga pomoću ovog alata naredbene linije zvanog SVGO.
lansiranje Terminal ili Naredbeni redak, i instalirajte SVGO s ovom naredbenom retkom:
[sudo] npm install -g svgo
Podesite naredbu, svgo, na SVG datoteci pomoću --prilično za izradu čitljivog SVG koda:
svgo rocket.svg -
Ako imate više SVG-ova u direktoriju, možete ih optimizirati sve zajedno, odjednom. Pretpostavljajući da je imenik imenovan / slike, zatim iz nadređenog imenika upotrijebite ovu naredbu:
svgo -f images - precizno
Pogledajmo razliku prije i poslije korištenja SVGO-a.
Kopirajte kôd unutar SVG datoteke i zalijepite ga u HTML datoteku. Radit ćemo na radnom prostoru širine 800px od 600px, pa nemojmo zaboraviti definirati širina na SVG elementu.
SVG je postavljen u HTML datoteci. Morat ćemo definirati ID za svaki objekt, kako bismo ih kasnije mogli odabrati u CSS-u.
Za ovaj vodič, moramo definirati ID rakete i plamena, te neke oblake. Da bi objekti kasnije mogli upravljati fazom animacije, moramo dodati iskaznica - također možete koristiti klasa - na svaki objekt. U ovom trenutku, kôd će izgledati ovako:
3. Animirajte pomoću CSS-a
Sada se zabavimo. Plan je pojačati raketu u svemir. Raketa je podijeljena u dvije skupine; sama raketa i plamen.
Prije svega, postavljamo raketu u sredinu radnog prostora, kako slijedi:
#rocket transform: translate (260px, 200px);
Ono što vidite je ovo:
Da bi raketa izgledala kao da ide prema gore, moramo stvoriti iluziju pada oblaka. CSS koji koristimo za ovo je:
# cloud1 animacija: pada 1s linearna beskonačnost; @keyframes pada from transform: translateY (-100px)); do transform: translateY (1000px)
Da bi izgledao još realističnije, animirajmo četiri oblaka i napravimo ih “pad” različitim brzinama. Također ćemo ih postaviti drugačije od X-osi.
Drugi oblak će imati ovakav kod:
# cloud2 animacija: pada-2 2s linearna beskonačnost; @keyframes fall-2 from transform: translate (200px, -100px)); do transform: translate (200px, 1000px)
Imajte na umu da smo pomicali oblak # 2 malo u desno, prema 200px s Prevedi. U ovoj fazi rezultat bi trebao izgledati ovako.
Zatim, neka raketa oživi. Dodijelit ćemo ključni okvir animacije kako slijedi:
#rocket animacija: popup 1 smanjuje beskonačnost; @keyframes skočni prozor 0% transform: translate (260px, 200px)); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
I dodajte animaciju u raketni plamen:
#flame animacija: protresite .2s linearno beskonačno; @keyframes tresti 0% transform: translate (55px, 135px) rotirati (7deg); 20% transform: translate (55px, 135px) rotate (0deg); 40% transform: translate (55px, 135px) rotate (-7deg); 60% transform: translate (55px, 135px) rotate (0deg); 100% transform: translate (55px, 135px) rotate (0deg);
Pravo! Sada kada su naši kodovi postavljeni, animacija bi trebala raditi na našem SVG-u.
Pogledajte našu raketnu eksploziju u svemir.
Konačna misao
Animacija nije najjednostavnija značajka u CSS-u. Ali nadamo se da ćete ovaj vodič smatrati dobrom početnom točkom za daljnje istraživanje CSS animacije na SVG-u; bili biste iznenađeni da znate što se može postići s CSS Animation pri ruci.
Ako želite početi s osnovama, možete početi s ovim postom: A Into: Scalable Vector Graphics (SVG) Animacija ili slijedite ostatak SVG serije.
- Prikaži demo
- Preuzimanje izvora
