Ako vytvoriť animáciu SVG pomocou
Animácia SVG môže byť vykonaná prostredníctvom natívnych prvkov, ako napr
Animácia CSS by mohla byť alternatívnym spôsobom ako používať knižnicu JavaScript, ako je SnapSVG. V tomto príspevku uvidíme, čo môžeme dodať s animáciou CSS v SVG.
1. Vytvorenie tvarov
Najskôr budeme musieť nakresliť tvary a predmety, ktoré chceme oživiť. Aplikácie môžete používať napríklad Skica, Adobe Illustrator, alebo Inkscape vytvoriť jeden.
Pre tento príklad som na pozadí kreslil oblačnú oblohu a raketovú loď strieľajúcu nahor, plamene zahŕňali:
Akonáhle to urobíme s výkresom, musíme exportovať každý objekt, ktorý sme vytvorili do SVG.
Použijem náčrtok ako príklad tohto kroku. Vyberte objekt, ktorý chcete zmeniť na formát SVG. V pravom dolnom rohu okna kliknite na položku Značka Exportable. Vyberte formát SVG a potom kliknite na položku Exportovať object-name. Musíte robiť tento jeden objekt naraz.
2. Vložte SVG do HTML
Keď otvoríte súbor SVG v editore kódov, zistíte, že kódy SVG sú celkom nepríjemné. Preto pred nasadením súboru SVG pošlite kód a optimalizujte ho nástrojom príkazového riadku s názvom SVGO.
odpálenie terminál alebo Príkazový riadok, a nainštalujte SVGO týmto príkazovým riadkom:
[sudo] npm install -g svgo
Spustite príkaz, svgo, na súbore SVG pomocou --pekný na vytvorenie čitateľného kódu SVG:
svgo rocket.svg --pretty
Ak máte v adresári viacero SVG, môžete ich naraz optimalizovať naraz. Za predpokladu, že je adresár pomenovaný /snímky, potom z nadradeného adresára použite tento príkaz:
svgo -f obrázky -
Pozrime sa na rozdiel pred a po použití SVGO.
Skopírujte kód v súbore SVG a vložte ho do súboru HTML. Budeme pracovať na pracovnom priestore s rozmermi 800 x 600 pixlov, takže nezabudnite definovať šírka na prvok SVG.
SVG je nastavený v súbore HTML. Budeme musieť definovať ID pre každý objekt, takže ho môžeme neskôr vybrať v CSS.
Pre tento tutoriál musíme definovať ID pre raketu a plamene a niektoré mraky. Aby objekt neskôr spracoval fázu animácie, musíme ho pridať id - môžete tiež použiť trieda - na každý objekt. V tomto štádiu bude kód vyzerať takto:
3. Animovať pomocou CSS
Teraz sa bavíme. Plán je zvýšenie rakety do vesmíru. Raketa je rozdelená do dvoch skupín; samotná raketa a plameň.
Najprv umiestnime raketu uprostred pracovného priestoru takto:
#rocket transform: translate (260px, 200px);
To, čo vidíte, je toto:
Teraz, aby raketa vyzerala tak, že ide hore, musíme vytvoriť ilúziu pádu mrakov. CSS, ktorý používame na tento účel, je:
# cloud1 animácia: pokles 1s lineárny nekonečný; @keyframes fall z transform: translateY (-100px); na transform: translateY (1000px)
Ak chcete, aby to vyzeralo ešte reálnejšie, nechajte animovať štyri mraky a vytvorte ich “spadnúť” pri rôznych rýchlostiach. Budeme ich tiež umiestňovať odlišne od osi X..
Druhý oblak bude mať tento kód:
# cloud2 animácia: fall-2 2s lineárny nekonečný; @ keyframes fall-2 z transform: translate (200px, -100px); do transform: translate (200px, 1000px)
Všimnite si, že sme posunuli oblak # 2 trochu doprava, pomocou 200px s preložiť. V tomto štádiu by výsledok mal vyzerať takto.
Ďalej ukážeme raketu. Priradíme animačný kľúčový snímok takto:
#rocket animation: popup 1s ľahko nekonečné; kontextové pole @keyframes 0% transform: translate (260px, 200px); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
A pridávajte aj animáciu raketového plameňa:
#flame animation: shake .2s lineárne nekonečné; @keyframes otriasť 0% transform: preložiť (55px, 135px) otočiť (7deg); 20% transform: preložiť (55px, 135px) otočiť (0deg); 40% transform: preložiť (55px, 135px) otočiť (-7deg); 60% transform: preložiť (55px, 135px) otočiť (0deg); 100% transform: preložiť (55px, 135px) otočenie (0deg);
Správny! Keď už sú naše kódy nastavené, animácia by mala fungovať na našom SVG.
Pozrite sa na našu raketu tryskaním do vesmíru.
Konečná myšlienka
Animácia nie je najjednoduchšia funkcia v CSS na pochopenie. Dúfajme, že tento tutoriál nájdete ako dobrý východiskový bod na preskúmanie animácie CSS na SVG. budete prekvapení, že viete, čo sa dá dosiahnuť pomocou animácie CSS.
Ak chcete začať s veľmi základy, môžete začať tu s týmto príspevkom: Pozrite sa do: Scalable Vector Graphics (SVG) Animácia alebo sledovať zvyšok seriálu SVG.
- Zobraziť demo
- Stiahnuť zdroj
