Hur man skapar SVG-animering med hjälp av CSS
Animering SVG kan göras genom inbyggda element som
CSS Animation kan också vara ett alternativt sätt att använda JavaScript-bibliotek som SnapSVG. I det här inlägget ser vi vad vi kan möjligen leverera med CSS Animation i SVG.
1. Skapa formerna
Först av allt måste vi rita de former och föremål som vi vill animera. Du kan använda applikationer som Skiss, Adobe Illustrator, eller Inkscape att skapa en.
För det här exemplet har jag dragit en molnig himmel som bakgrund, och ett raketfartyg skjuter uppåt, flammor ingår:
En gång gjort med ritningen måste vi exportera varje objekt vi har skapat till SVG.
Jag ska använda Sketch som ett exempel för detta steg. Markera objektet du vill konvertera till SVG-format. Höger längst ner till höger klickar du på Gör exportbar. Välj SVG-format och klicka sedan på Exportera objektnamn. Du måste göra det här objektet åt gången.
2. Sätt in SVG i HTML
När du öppnar SVG-filen i en kodredigerare, hittar du att SVG-koder är ganska röriga. Därför, innan vi distribuerar SVG-filen, låt oss städa upp koden och optimera den med detta kommandoradsverktyg som heter SVGO.
Lansera Terminal eller Command Prompt, och installera SVGO med den här kommandoraden:
[sudo] npm installera -g svgo
Tänd kommandot, svgo, på SVG-filen med --Söt att producera läsbar SVG-kod:
svgo rocket.svg - pretty
Om du har flera SVG-filer i en katalog kan du optimera dem alla tillsammans, samtidigt. Antag att katalogen heter /bilder, använd sedan det här kommandot i moderkatalogen:
svgo -f bilder - ganska
Låt oss se skillnaden före och efter att använda SVGO.
Kopiera koden i SVG-filen och klistra in i en HTML-fil. Vi kommer att arbeta på en arbetsyta på 800px med 600px bred, så låt oss inte glömma att definiera bredd på SVG-elementet.
SVG är inställd i HTML-filen. Vi måste definiera ett ID för varje objekt, så vi kan välja dem i CSS senare.
För denna handledning måste vi definiera ID för raket och flammor, och några av molnen. För att objekten ska hantera animationsstadiet senare behöver vi lägga till id - du kan också använda klass - till varje objekt. I detta skede ser koden ut så här:
3. Animera med CSS
Nu har vi roligt. Planen är att öka raket upp i rymden. Raketten är uppdelad i två grupper; raketen själv och flamman.
Först placerar vi raketen mitt i arbetsytan enligt följande:
#racket transform: translate (260px, 200px);
Vad du ser är detta:
Nu för att få raketen att se ut som det går uppåt, måste vi skapa illusionen av moln som faller. Den CSS som vi använder för detta är:
# cloud1 animation: fall 1s linjärt oändligt; @keyframes fall från transform: translateY (-100px); till transform: translateY (1000px)
För att få det att se ännu mer realistiskt, låt oss animera fyra moln och göra dem “falla” vid olika hastigheter. Vi placerar dem också annorlunda än X-axeln.
Det andra molnet kommer att ha kod så här:
# cloud2 animation: fall-2 2s linjärt oändligt; @keyframes fall-2 från transform: translate (200px, -100px); till transformera: translate (200px, 1000px)
Observera att vi har flyttat molnet # 2 lite till höger, av 200px med Översätt. I detta skede borde resultatet se ut så här.
Låt oss nu göra raketen till liv. Vi kommer att tilldela en animeringsnyckelram som följer:
#rocket animation: popup 1s enkelt oändligt; @keyframes popup 0% transform: translate (260px, 200px); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
Och lägg till animering till raketflammen också:
#flame animation: shake .2s linjärt oändligt; @keyframes shake 0% transform: translate (55px, 135px) rotera (7deg); 20% transform: translate (55px, 135px) rotera (0deg); 40% transform: translate (55px, 135px) rotera (-7deg); 60% transform: translate (55px, 135px) rotera (0deg); 100% transform: translate (55px, 135px) rotera (0deg);
Höger! Nu när våra koder är alla inställda, ska animationen fungera på vårt SVG.
Ta en titt på vår raketblästring i rymden.
Slutlig tanke
Animering är inte den enklaste funktionen i CSS att förstå. Men förhoppningsvis hittar du denna handledning som en bra utgångspunkt för att utforska CSS Animation på SVG ytterligare; du skulle bli förvånad att veta vad som kan uppnås med CSS Animation till hands.
Om du vill börja med de allra bästa grunderna kan du börja här med det här inlägget: En inblick i: Skalbar vektorgrafik (SVG) Animation eller följ resten av SVG-serien.
- Visa demo
- Hämta källa
