En nybörjarguide till SVG-animering med CSS

Scalable Vector Graphics (SVG) är mer än bara bildfiler. Som en XML-applikation innehåller SVG-filer uppmärkning som ser ut och fungerar ungefär som HTML. Du kan också använda dem tillsammans med CSS och JavaScript-kod. Detta gör det möjligt att animera SVG-filer, skapa komplexa bilder som fungerar bra för webbdesign och andra dynamiska miljöer.

Men hur gör man en SVG-animation? Börja med en SVG-form, animera den med CSS och bygg på dessa principer för att använda animation i ditt eget arbete.

Animera SVG: er med HTML och CSS

Även om du kan använda JavaScript för att programmatiskt animera SVG, har CSS nu bra stöd för animationer också. Du kan hitta alla exempelkoder på CodePen för detta projekt.

Bygga en SVG-bild i HTML

Det första steget i denna process är att bygga den SVG-bild du kommer att arbeta med. Du kan hitta SVG-uppmärkning i HTML-panelen på CodePen.

SVG-struktur

Även om SVG: er delar ett format som liknar HTML, är taggarna du använder för att skapa dem olika. En SVG har öppnings- och stängningstaggar () som kan innehålla en mängd olika egenskaper. I vårt fall använder vi

id och viewBox egenskaper. Egenskapen id fungerar som alla andra HTML-ID, och ger dig en unik identifierare att använda i din CSS/JS. ViewBox-egenskapen anger storleken på vår SVG.

<!-- SVG med responsiv storlek -->
<svg id="MUOSVGAanimation" viewBox="0 0 800 600">
<!-- SVG-innehåll -->
</svg>

Du kan använda egenskaperna bredd och höjd istället, som följande exempel visar. ViewBox skapar dock en responsiv SVG som matchar storleken på viewporten utan att bryta dess bildförhållande.

 SVG med en statisk storlek 
<svg id="MUOSVGAanimation" bredd="800" höjd="600">
<!-- SVG-innehåll -->
</svg>

SVG-former

Du kan skapa detaljerade bilder med SVG: er, med en mängd olika formverktyg till ditt förfogande. Det här SVG-exemplet använder tre av de tillgängliga formerna, men det finns många andra. Var och en av formerna i det här exemplet har ett unikt ID som CSS-animationerna kan använda senare.

• SVG Ellipse: Detta är ett cirkel/ovalt verktyg. Den anger egenskaper för y/x-axelns radie (rx/ry), fyllningsfärg och streckbredd. Det är viktigt att komma ihåg att radien du väljer med detta verktyg kommer att vara hälften av formens diameter.

<ellips id="cirkel" rx="100" ry="100" fyll="#ffed00" slagbredd="0"/>

• SVG Rect: SVG rect-verktyget skapar en kvadrat eller rektangel. Den här har egenskaper för bredd/höjd, en transformation, fyllningsfärg och streckbredd.

<rect id="fyrkant" bredd="200" höjd="200" transform="översätt (300 200)" fyll="#05f"
 slagbredd="0"/>

• SVG-polygon: Använd en SVG-polygon för att ställa in ett specifikt antal punkter och skapa godtyckliga former av olika storlekar. Polygonen i exemplet är tresidig, vilket gör den till en triangel, och du kan se positionen för varje punkt inritad i dess egenskaper. Tillsammans med detta har vi egenskaper för triangelns position, fyllningsfärg och streckbredd.

<polygon id="triangel" poäng="15,-97 115,102 -84,102 15,-97"
 transform="översätt (0,0)" fyll="#f00" slagbredd="0"/>

När animeringen är på plats kommer formerna att radas bredvid varandra.

Dessa tre SVG-former är några av de vanligaste, men det finns fler att välja mellan. Du kan använda följande former när arbetar med en SVG-animation:

• SVG-cirkel: Denna form liknar en ellips, men den har alltid lika X- och Y-radier.
• SVG-linje: En SVG-linje är ett enda linjesegment med två punkter, en i varje ände.
• SVG Polyline: Polylinjer är som grundläggande linjer, bara de kan ha mer än två punkter.
• SVG-polygon: SVG-polygoner är som rektanglar, bara de kan ha fler än fyra punkter, vilket gör komplexa former möjliga.
• SVG-sökväg: SVG-sökvägar fungerar på samma sätt som pennverktyget i Adobe Photoshop. Linjer kan ansluta som en polylinje/polygon, men de kan också ha kurvor på dem.

Hur man animerar SVG: er med CSS

Nu när du har några former i din SVG är det dags att gå vidare till CSS-animeringen. Var och en av formerna har olika animationer för att visa några av alternativen du har, men det finns mycket mer att utforska med dina egna mönster. Cirkeln rör sig över skärmen, kvadratens hörn blir runda och triangeln roterar. Alla dessa använder CSS-nyckelrutor för att skapa smidiga animationer.

Flytta cirkeln med Transform och Translate

Cirkeln i SVG-exemplet flyttas från botten till toppen av skärmen under sin animeringscykel. Du måste tilldela en animation till cirkeln innan den kan flyttas, via en CSS-egenskap:

#cirkel {
 animation: circle_anim 2000ms linjär oändlig normal framåt
}

Det första ordet i värdet, cirkel_anim, är ett namn för animationen. Den kör i två sekunder (2000 ms). Den har en linjär kurva som håller sin hastighet konsekvent och är inställd på att köra en oändlig antal gånger i framåt riktning. Du kan använda nyckelbildrutor för att definiera individuella faser av animeringen:

@nyckelrutor circle_anim {
 0% { omvandla: Översätt(155 pixlar, 305 pixlar) }
 45% { omvandla: Översätt(155 pixlar, -123 pixlar) }
 50% { omvandla: Översätt(-123 pixlar, -123 pixlar) }
 55% { omvandla: Översätt(-123 pixlar, 728 pixlar) }
 60% { omvandla: Översätt(155 pixlar, 728 pixlar) }
 100% { omvandla: Översätt(155 pixlar, 305 pixlar) }
}

Det finns sex nyckelrutor i den här animationen, så cirkeln kommer att flyttas till sex olika platser i varje cykel. De förvandla: översätta egenskapen anger cirkelns position i varje steg. Vid 0 % är cirkeln i mitten av skärmen och flyttas upp och ut ur synfältet med 45 %. Med 50 % har den flyttat till vänster om skärmen innan den flyttats ner under visningsporten med 55 %. Cirkeln flyttas tillbaka till sin horisontella position med 60 %, och animeringen är klar till 100 % med cirkeln tillbaka i mitten av skärmen.

Animera torgets gränsradieegenskap

Fyrkanten i exemplet är en bra referens för allmänna fastighetsanimationer. Så länge du vet vilken syntax du ska använda kan du animera vilken CSS-egenskap som helst. Gränsradieegendomen är en bra demonstration av detta. Fyrkanten har skarpa hörn som förvandlas till rundade hörn och sedan tillbaka till fyrkantiga hörn igen.

#fyrkant { animation: square_anim 2000 ms ease-in-out oändliga normala framåt }

Den fyrkantiga animeringen kallas square_anim och den har en körtid på två sekunder. De lätt-in-ut kurvan gör animeringen långsammare i början och slutet, vilket skapar en jämn effekt.

@nyckelrutor square_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40px; ry: 40px }
 55% { rx: 40px; ry: 40px }
 100% { rx: 0px; ry: 0px }
}

Som du kan se har den här animationen fyra nyckelbildrutor. X- och Y-gränsradien ändras från 0px till 40px mellan 0% och 45% och pausas vid 40px till 55%. Den går sedan tillbaka till 0px för varje radie när animeringen når 100 %.

Rotera SVG-triangeln med Transform

Den sista SVG-animeringen i exemplet är den enklaste, med triangeln som roterar runt sin mittpunkt. Formen fullbordar ett helt varv varannan sekund och fortsätter löpa i det oändliga. Den har en ease-out-kurva som resulterar i att animeringen saktar ner i slutet. Animationen kallas triangle_anim.

#triangel { animation: triangel_anim 2000 ms lätta ut oändliga normala framåt }

Den här animeringen har två nyckelbildrutor, en på 0 % och den andra på 100 %. Egenskapen Transform rotate vrider triangeln från 0 grader vid 0 % till 360 grader vid 100 %, vilket skapar ett helt snurr.

@nyckelrutor triangle_anim {
 0% { omvandla: Översätt(644 pixlar, 297 pixlar) rotera(0 grader) }
 100% { omvandla: Översätt(644 pixlar, 297 pixlar) rotera(360 grader) }
}

Hur man animerar andra egenskaper

De tre animationerna som behandlas ovan är en bra utgångspunkt när du arbetar med SVG, men du kommer förmodligen att vilja driva detta ytterligare. Du kan använda CSS-animeringsregeln för att justera nästan alla egenskapsvärden du kan tilldela din SVG. Detta inkluderar grundläggande värden, som storlek och placering, såväl som mer avancerade värden, som kanter, skuggor och blandningslägen.

I sällsynta fall där CSS inte kan göra jobbet kan du använda JavaScript-kod för att animera SVG-bilder. Du kan hitta massor av guider som hjälper dig med detta när du känner dig redo att ta nästa steg med dina SVG: er.

Gör dina egna SVG-animationer

Oavsett om du är en webbdesigner, mjukvaruutvecklare eller helt enkelt en kreativ person kan SVG-animationer vara roliga och tillfredsställande att göra. Du kan hitta massor av resurser på webben som kan hjälpa dig med webbaserad animering, när du väl är bekväm med grunderna.

10 CSS-bakgrundsmönster du kan använda på din webbplats

Läs Nästa