Kuidas luua SVG animatsiooni CSS abil
SVG animatsiooni saab teha kohalike elementide kaudu, näiteks
CSS Animatsioon võib olla ka alternatiivne võimalus kasutada JavaScripti raamatukogu nagu SnapSVG. Selles postituses näeme, mida saame CG animatsiooniga SVG-s pakkuda.
1. Kujundite loomine
Kõigepealt peame joonistama kujundid ja objektid, mida tahame animeerida. Võite kasutada selliseid rakendusi Visand, Adobe Illustrator, või Inkscape selle loomiseks.
Selle näite jaoks olen taustapildiks pilvise taeva ja ülespoole pildistav raketilaev:
Kui joonistus on tehtud, peame eksportima iga SVG-sse loodud objekti.
Ma kasutan Sketchit selle sammu jaoks. Valige objekt, mida soovite SVG-vormingusse muuta. Klõpsake akna alumises paremas servas Tee eksporditav. Valige SVG-vorming, seejärel klõpsake käsku Ekspordi objekti nimi. Selleks tuleb korraga teha üks objekt.
2. Sisestage SVG HTML-i
SVG-faili avamisel koodiredaktoris leiate, et SVG-koodid on üsna räpased. Niisiis, enne SVG-faili kasutuselevõttu puhastame koodi ja optimeerime selle selle käsurea tööriista SVGO abil.
Käivita Terminal või Käsurida, ja installige SVGO selle käsureaga:
[sudo] npm install -g svgo
Tun käsk, svgo, SVG-failis --ilus toota loetavat SVG-koodi:
svgo rocket.svg --pretty
Kui teil on kataloogis mitu SVG-d, saate neid korraga optimeerida. Eeldades kataloogi nime / pildid, seejärel kasutage vanematelt kataloogilt seda käsku:
svgo -f pildid --pretty
Vaatame erinevust enne ja pärast SVGO kasutamist.
Kopeerige kood SVG-failis ja kleepige HTML-faili. Töötame 800px tööruumi laiusega 600 pikslit, nii et ärge unustage seda defineerida laius SVG elemendil.
SVG on määratud HTML-failis. Me peame iga objekti jaoks määratlema ID, et saaksime neid hiljem CSS-is valida.
Selle juhendi jaoks peame määratlema raketi ja leekide ID ja mõned pilved. Et objektid hiljem animatsiooniastmega hakkama saaksid, peame lisama id - saate kasutada ka klassi - igale objektile. Selles etapis näeb kood sellist välja:
3. Animeeri CSS kasutamine
Nüüd olgem lõbus. Plaan on suurendada raketti kosmosesse. Rakett on jagatud kahte rühma; rakett ise ja leek.
Kõigepealt paigutame raketi tööala keskele järgmiselt:
#rocket transform: translate (260px, 200px);
Mida te näete, on see:
Nüüd, et rakett näeks välja nagu see läheb ülespoole, peame looma pilvede illusiooni. Selleks kasutatav CSS on:
# cloud1 animatsioon: sügisel 1s lineaarne lõpmatu; @keyframes fall from transform: translateY (-100px); kuni transform: translateY (1000px)
Et see oleks veelgi realistlikum, loogime neli pilvet ja tehkem neid “langeda” erinevatel kiirustel. Samuti paigutame need X-teljest erinevalt.
Teisel pilvel on selline kood:
# cloud2 animatsioon: sügis-2 2s lineaarne lõpmatu; @keyframes fall-2 alates transform: translate (200px, -100px); kuni transform: translate (200px, 1000px)
Pange tähele, et oleme pilve # 2 liigutanud natuke paremale 200tk koos tõlkida. Selles etapis peaks tulemus olema selline.
Järgmisena tehkem rakett eluks. Määrame animatsioonivõtme raami järgmiselt:
#rocket animatsioon: hüpikaknad on lõpmatu; @keyframes popup 0% transform: translate (260px, 200px); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
Ja lisage ka raketi leegile animatsioon:
#flame animatsioon: raputage .2s lineaarne lõpmatu; @keyframes shake 0% transform: tõlkida (55px, 135px) (7deg); 20% teisendada: tõlkida (55px, 135px) (0deg); 40% teisendada: tõlkida (55px, 135px) (-7deg); 60% teisendada: tõlkida (55px, 135px) (0deg); 100% transform: translate (55px, 135px) pöörlema (0deg);
Õige! Nüüd, kui meie koodid on kõik seatud, peaks animatsioon töötama meie SVG-ga.
Heitke pilk meie raketi lõhkamisele kosmosesse.
Lõplik mõte
Animatsioon ei ole kõige lihtsam CSS-i funktsioon. Loodetavasti leiad selle juhendaja hea lähtepunktina CSS Animatsiooni SVG-le uurimiseks; sa oleksid üllatunud, kui teate, mida saab saavutada CSS Animatsiooniga.
Kui soovid alustada väga põhitõedega, võite alustada siin selle postitusega: vaata: skaleeritav vektorgraafika (SVG) animatsioon või järgida ülejäänud SVG-seeriaid.
- Kuva demo
- Allalaadimise allikas
