Kako ustvariti SVG animacijo z uporabo CSS
Animiranje SVG-jev je mogoče opraviti prek naravnih elementov, kot je
CSS Animacija je lahko tudi alternativni način uporabe knjižnice JavaScript, kot je SnapSVG. V tem prispevku bomo videli, kaj lahko s programom CSS Animation dostavimo v SVG.
1. Ustvarjanje oblik
Najprej bomo morali narisati oblike in predmete, ki jih želimo animirati. Uporabite lahko aplikacije, kot je Skica, Adobe Illustrator, ali Inkscape ustvariti.
V tem primeru sem kot ozadje narisal oblačno nebo in raketna ladja, ki se je premaknila navzgor, vključno s plameni:
Ko končamo z risbo, moramo izvoziti vsak objekt, ki smo ga ustvarili v SVG.
Kot primer za ta korak bom uporabil Sketch. Izberite predmet, ki ga želite pretvoriti v format SVG. V spodnjem desnem kotu okna kliknite Izvozi. Izberite obliko SVG, nato kliknite Izvozi ime-objekta. Ta predmet morate opraviti naenkrat.
2. Vstavite SVG v HTML
Ko odprete datoteko SVG v urejevalniku kod, boste ugotovili, da so kode SVG precej neurejene. Zato, preden namestimo datoteko SVG, naj uredimo kodo in jo optimiziramo z orodjem ukazne vrstice SVGO, imenovanim SVGO.
Kosilo Terminal ali Ukazni poziv, in namestite SVGO s to ukazno vrstico:
[sudo] npm namestite -g svgo
Podesite ukaz, svgo, v datoteki SVG --lepa izdelati čitljivo kodo SVG:
svgo rocket.svg - prevedeno
Če imate v imeniku več SVG-jev, jih lahko vse skupaj optimizirate. Ob predpostavki, da je imenik imenovan / slike, nato iz nadrejenega imenika uporabite ta ukaz:
svgo -f images - natančno
Poglejmo razliko pred in po uporabi SVGO.
Kopirajte kodo v datoteki SVG in jo prilepite v datoteko HTML. Delali bomo na delovnem prostoru s širino 800px in 600px, zato ne pozabimo določiti premer v elementu SVG.
SVG je nastavljen v datoteki HTML. Za vsak objekt bomo morali definirati ID, tako da jih bomo kasneje lahko izbrali v CSS.
Za to vadnico moramo določiti ID za raketo in plamene ter nekatere oblake. Da bi objekti pozneje obravnavali fazo animacije, moramo dodati id - lahko uporabite tudi razred - za vsak predmet. Na tej stopnji bo koda izgledala takole:
3. Animirajte z uporabo CSS
Zdaj pa se zabavajmo. Načrt je povečati raketo v vesolje. Raketa je razdeljena v dve skupini; sama raketa in plamen.
Najprej postavimo raketo na sredino delovnega prostora, kot sledi:
#rocket transform: translate (260px, 200px);
To, kar vidite, je:
Zdaj, da bo raketa izgledala, kot da gre navzgor, moramo ustvariti iluzijo padanja oblakov. CSS, ki ga uporabljamo za to, je:
# cloud1 animacija: padec 1s linearno neskončno; @keyframes pade from transform: translateY (-100px); do transform: translateY (1000px)
Da bi bilo videti bolj realistično, naj animiramo štiri oblake in jih naredimo “padec” pri različnih hitrostih. Prav tako jih bomo postavili drugače od osi X.
Drugi oblak bo imel takšno kodo:
# cloud2 animacija: padec-2 2s linearno neskončno; @keyframes fall-2 from transform: translate (200px, -100px)); do transform: translate (200px, 1000px)
Upoštevajte, da smo oblak # 2 malo premaknili v desno, in sicer 200 px z prevesti. Na tej stopnji mora biti rezultat videti tak.
Naprej, naj raketeta oživi. Dodeli bomo ključni okvir animacije, kot sledi:
#rocket animacija: pojavna okna se zlahka izognejo; @keyframes pojavno okno 0% transform: translate (260px, 200px)); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
In dodajte animacijo tudi na raketni plamen:
#flame animacija: pretresite .2s linearno neskončno; @keyframes pretresite 0% transform: translate (55px, 135px)) zavrtite (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);
Prav! Zdaj, ko so naše kode nastavljene, mora animacija delovati na našem SVG.
Oglejte si našo raketno razstrelitev v vesolje.
Končna misel
Animacija v CSS-ju ni najlažja za razumevanje. Upamo pa, da bo ta vadnica dobra izhodiščna točka za nadaljnje raziskovanje CSS animacije na SVG-ju; presenečeni boste, če veste, kaj je mogoče doseči s pomočjo CSS Animacije.
Če želite začeti z zelo osnovami, lahko začnete tukaj s to objavo: A Into: Scalable Vector Graphics (SVG) Animacija ali sledite preostali seriji SVG.
- Prikaži predstavitev
- Prenesi vir
