Cum se creează animația SVG utilizând CSS
Animarea SVG poate fi făcută prin elemente native, cum ar fi
CSS Animație ar putea fi, de asemenea, o modalitate alternativă de a folosi biblioteca JavaScript ca SnapSVG. În acest post vom vedea ce putem livra cu animația CSS în SVG.
1. Crearea Formelor
Mai întâi de toate, va trebui să desenați formele și obiectele pe care vrem să le animăm. Puteți utiliza aplicații cum ar fi Schiță, Adobe Illustrator, sau Inkscape pentru a crea unul.
Pentru acest exemplu, am desenat un cer noros ca fundal, și o navă de rachete împușcată în sus, flăcările au inclus:
După ce ați terminat desenul, trebuie să exportați fiecare obiect pe care l-am creat în SVG.
Voi folosi Sketch ca exemplu pentru acest pas. Selectați obiectul pe care doriți să îl transformați în format SVG. În colțul din dreapta jos al ferestrei, faceți clic pe Faceți Exportabil. Alegeți formatul SVG, apoi faceți clic pe Export object-name. Trebuie să faceți acest obiect la un moment dat.
2. Introduceți SVG-ul în HTML
Când deschideți fișierul SVG într-un editor de coduri, veți observa că codurile SVG sunt destul de dezordonate. Prin urmare, înainte de a implementa fișierul SVG, să ordonăm codul și să îl optimizăm cu ajutorul acestui instrument de comandă numit SVGO.
Lansa Terminal sau Comandă de comandă, și instalați SVGO cu această linie de comandă:
[sudo] npm instalați -g svgo
Trageți comanda, svgo, pe fișierul SVG folosind --frumos pentru a produce cod SVG lizibil:
svgo rocket.svg --pretty
Dacă aveți mai multe SVG-uri într-un director, puteți să le optimizați împreună, simultan. Presupunând că directorul este denumit / imagini, apoi din directorul părinte folosiți această comandă:
svgo -f imagini - pretutindeni
Să vedem diferența înainte și după utilizarea SVGO.
Copiați codul în fișierul SVG și inserați-l într-un fișier HTML. Vom lucra pe un spațiu de lucru de 800px și 600px lățime, deci nu uitați să definiți lăţime pe elementul SVG.
SVG-ul este setat în fișierul HTML. Va trebui să definim un ID pentru fiecare obiect, astfel încât să îl putem selecta mai târziu în CSS.
Pentru acest tutorial, trebuie să definim ID-ul pentru rachetă și flăcări și unele nori. Pentru ca obiectele să se ocupe ulterior de etapa de animație, trebuie să adăugăm id - puteți utiliza, de asemenea clasă - la fiecare obiect. În acest stadiu, codul va arăta astfel:
3. Animați folosind CSS
Acum hai să ne distrăm. Planul este de a spori racheta în spațiu. Racheta este împărțită în două grupuri; racheta însăși și flacăra.
Mai întâi de toate, poziționăm racheta în mijlocul spațiului de lucru, după cum urmează:
#rocket transform: translate (260px, 200px);
Ceea ce vedeți este acesta:
Acum, pentru a face ca racheta să pară că merge mai sus, trebuie să creăm iluzia căderii nori. CSS pe care îl folosim este:
# cloud1 animație: cădere 1s liniară infinită; @ cadrele cheie cad din transform: translateY (-100px); pentru a transforma translateY (1000px)
Pentru a face să pară și mai realistă, hai să animăm patru nori și să le facem “cădea” la viteze diferite. De asemenea, le vom poziționa diferit față de axa X..
Cel de-al doilea nor va avea un cod ca acesta:
# cloud2 animație: toamna-2 2s liniară infinită; @ cadre cheie-2 din transform: translate (200px, -100px); pentru a transform: translate (200px, 1000px)
Rețineți că am mutat norul # 2 puțin spre dreapta, prin 200px cu Traduceți. În acest stadiu, rezultatul ar trebui să arate așa.
Apoi, să facem ca racheta să vină la viață. Vom aloca o cheie de animație, după cum urmează:
#rocket animation: popup 1s ușurința infinită; @ popup-uri de chei 0% transform: translate (260px, 200px); 50% transform: traduce (260px, 240px); 100% transform: traduce (260px, 200px);
Și adăugați și animație la flacăra de rachetă:
#flame animație: shake .2s line infinit; @ cheile de chei shake 0% transform: traduce (55px, 135px) rotate (7deg); 20% transform: traduceți (55px, 135px) rotiți (0deg); 40% transform: traduce (55px, 135px) rotate (-7deg); 60% transform: traduceți (55px, 135px) rotiți (0deg); 100% transform: traduceți (55px, 135px) rotiți (0deg);
Dreapta! Acum, când codurile noastre sunt setate, animația ar trebui să funcționeze pe SVG-ul nostru.
Aruncati o privire asupra rachetei noastre in spatiu.
Gândirea finală
Animația nu este cea mai simplă funcție din CSS de a înțelege. Dar sperăm că veți găsi acest tutorial drept un bun punct de plecare pentru a explora în continuare CSS Animation pe SVG; ai fi surprins să știi ce se poate realiza cu animația CSS la îndemână.
Dacă doriți să începeți cu foarte multe lucruri de bază, puteți începe aici cu acest post: O privire în: Grafică vectorială scalabilă (SVG) sau urmați restul seriei SVG.
- Vizualizați demonstrația
- Descărcați sursa
