En begyndervejledning til SVG-animation med CSS

Scalable Vector Graphics (SVG'er) er mere end blot billedfiler. Som en XML-applikation indeholder SVG'er markup, der ligner og fungerer meget som HTML. Du kan også bruge dem sammen med CSS- og JavaScript-kode. Dette gør det muligt at animere SVG-filer og skabe komplekse billeder, der fungerer godt til webdesign og andre dynamiske miljøer.

Men hvordan laver man en SVG-animation? Start med en SVG-form, animer den ved hjælp af CSS, og byg videre på disse principper for at bruge animation i dit eget arbejde.

Animering af SVG'er med HTML og CSS

Selvom du kan bruge JavaScript til programmatisk animation af SVG'er, har CSS nu også god understøttelse af animationer. Du kan finde al prøvekoden på CodePen til dette projekt.

Opbygning af et SVG-billede inde i HTML

Det første trin i denne proces er at bygge det SVG-billede, du vil arbejde med. Du kan finde SVG-markering i HTML-panelet på CodePen.

SVG struktur

Mens SVG'er deler et format, der ligner HTML, er de tags, du bruger til at oprette dem, forskellige. En SVG har åbne- og lukketags (), der kan indeholde en række forskellige egenskaber. I vores tilfælde bruger vi

id og viewBox ejendomme. Id-egenskaben fungerer som ethvert andet HTML-id og giver dig en unik identifikator til brug i din CSS/JS. ViewBox-egenskaben angiver størrelsen på vores SVG.

<!-- SVG med en responsiv størrelse -->
<svg id="MUOSVGAanimation" viewBox="0 0 800 600">
<!-- SVG-indhold -->
</svg>

Du kan bruge egenskaber for bredde og højde i stedet, som det følgende eksempel viser. ViewBox skaber dog en responsiv SVG, der matcher størrelsen af ​​viewporten uden at bryde dens billedformat.

 SVG med en statisk størrelse 
<svg id="MUOSVGAanimation" bredde ="800" højde="600">
<!-- SVG-indhold -->
</svg>

SVG-former

Du kan oprette detaljerede billeder med SVG'er med en række forskellige formværktøjer til din rådighed. Dette SVG-eksempel bruger tre af de tilgængelige former, men der er mange andre. Hver af figurerne i dette eksempel har et unikt ID, som CSS-animationerne kan bruge senere.

• SVG Ellipse: Dette er et cirkel/ovalt værktøj. Den specificerer egenskaber for y/x-aksens radius (rx/ry), fyldfarve og stregbredde. Det er vigtigt at huske, at den radius, du vælger med dette værktøj, vil være halvdelen af ​​formens diameter.

<ellipse id="cirkel" rx="100" ry="100" fyld="#ffed00" slag-bredde="0"/>

• SVG Rect: SVG rect-værktøjet opretter en firkant eller et rektangel. Denne har egenskaber for bredde/højde, en transformation, fyldfarve og stregbredde.

<rect id="firkant" bredde ="200" højde="200" transform="oversæt (300 200)" fyld="#05f"
 slag-bredde="0"/>

• SVG-polygon: Brug en SVG-polygon til at indstille et bestemt antal punkter og skabe vilkårlige former i forskellige størrelser. Polygonen i eksemplet er tresidet, hvilket gør den til en trekant, og du kan se placeringen af ​​hvert punkt plottet i dets egenskaber. Sammen med dette har vi egenskaber for trekantens position, fyldfarve og stregbredde.

<polygon id="trekant" point="15,-97 115,102 -84,102 15,-97"
 transform="oversæt (0,0)" fyld="#f00" slag-bredde="0"/>

Når animationen er på plads, vil figurerne stå på linje ved siden af ​​hinanden.

Disse tre SVG-former er nogle af de mest almindelige, men der er flere at vælge imellem. Du kan bruge følgende former, når arbejder med en SVG-animation:

• SVG-cirkel: Denne form ligner en ellipse, men den har altid ens X- og Y-radius.
• SVG-linje: En SVG-linje er et enkelt linjesegment med to punkter, et i hver ende.
• SVG Polyline: Polylinjer er som grundlæggende linjer, kun de kan have mere end to punkter.
• SVG-polygon: SVG-polygoner er som rektangler, kun de kan have mere end fire punkter, hvilket gør komplekse former mulige.
• SVG-sti: SVG-stier fungerer på samme måde som penværktøjet i Adobe Photoshop. Linjer kan forbindes som en polylinje/polygon, men de kan også have kurver påført dem.

Sådan animeres SVG'er med CSS

Nu hvor du har nogle former inde i din SVG, er det tid til at gå videre til CSS-animationen. Hver af figurerne har en anden animation for at demonstrere nogle af de muligheder, du har, men der er meget mere at udforske med dine egne designs. Cirklen bevæger sig hen over skærmen, firkantens hjørner bliver runde, og trekanten roterer. Alle disse bruger CSS keyframes til at skabe glatte animationer.

Flytning af cirklen ved hjælp af Transform og Translate

Cirklen i SVG-eksemplet flytter sig fra bunden til toppen af ​​skærmen under dens animationscyklus. Du skal tildele en animation til cirklen, før den kan flyttes, via en CSS-egenskab:

#cirkel {
 animation: circle_anim 2000ms lineær uendelig normal fremad
}

Det første ord i værdien, cirkel_anim, er et navn for animationen. Den kører i to sekunder (2000 ms). Den har en lineær kurve, der holder sin hastighed konsistent og er indstillet til at køre en uendelig antal gange i fremad retning. Du kan bruge keyframes til at definere individuelle faser af animationen:

@keyframes cirkel_anim {
 0% { transformere: Oversætte(155 px, 305 px) }
 45% { transformere: Oversætte(155 px, -123 px) }
 50% { transformere: Oversætte(-123 px, -123 px) }
 55% { transformere: Oversætte(-123 px, 728 px) }
 60% { transformere: Oversætte(155 px, 728 px) }
 100% { transformere: Oversætte(155 px, 305 px) }
}

Der er seks keyframes i denne animation, så cirklen vil flytte til seks forskellige steder i hver cyklus. Det transformere: oversætte egenskaben angiver cirklens position på hvert trin. Ved 0 % er cirklen i midten af ​​skærmen og bevæger sig op og ud af syne med 45 %. Med 50 % er den flyttet til venstre på skærmen, før den er flyttet ned under viewporten med 55 %. Cirklen bevæger sig tilbage til sin vandrette position med 60 %, og animationen er fuldført ved 100 % med cirklen tilbage i midten af ​​skærmen.

Animer pladsens grænseradius-ejendom

Firkanten i eksemplet er en god reference til generelle ejendomsanimationer. Så længe du kender den korrekte syntaks, du skal bruge, kan du animere enhver CSS-egenskab. Grænse-radius-ejendommen er en god demonstration af dette. Firkanten har skarpe hjørner, der bliver til afrundede hjørner og så tilbage til firkantede hjørner igen.

#firkant { animation: square_anim 2000 ms ease-in-out uendelig normal fremad }

Den firkantede animation kaldes square_anim, og den har en kørselstid på to sekunder. Det let ind-ud kurve gør animationen langsommere i begyndelsen og slutningen, hvilket skaber en jævn effekt.

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

Som du kan se, har denne animation fire keyframes. X- og Y-grænseradiusen ændres fra 0px til 40px mellem 0% og 45%, pause ved 40px indtil 55%. Den går derefter tilbage til 0px for hver radius, når animationen når 100 %.

Roter SVG-trekanten med Transform

Den sidste SVG-animation i eksemplet er den enkleste, hvor trekanten roterer omkring sit midtpunkt. Formen fuldender en fuld omdrejning hvert andet sekund og fortsætter med at løbe uendeligt. Den har en lethedskurve, der resulterer i, at animationen aftager til sidst. Animationen kaldes triangle_anim.

#trekant { animation: triangle_anim 2000 ms ease-out uendelig normal fremad }

Denne animation har to keyframes, den ene på 0 % og den anden på 100 %. Egenskaben Transform rotate drejer trekanten fra 0 grader ved 0 % til 360 grader ved 100 %, hvilket skaber et fuldt spin.

@keyframes triangle_anim {
 0% { transformere: Oversætte(644px, 297px) rotere(0 grader) }
 100% { transformere: Oversætte(644px, 297px) rotere(360 grader) }
}

Sådan animeres andre egenskaber

De tre animationer, der er dækket ovenfor, er et godt udgangspunkt, når du arbejder med SVG'er, men du vil sandsynligvis gerne skubbe dette yderligere. Du kan bruge CSS-animationsreglen til at justere næsten enhver egenskabsværdi, du kan tildele din SVG. Dette inkluderer grundlæggende værdier, såsom størrelse og placering, såvel som mere avancerede værdier, såsom kanter, skygger og blandingstilstande.

I sjældne tilfælde, hvor CSS ikke kan udføre jobbet, kan du bruge JavaScript-kode til at animere SVG-billeder. Du kan finde masser af guider til at hjælpe dig med dette, når du føler dig klar til at tage det næste skridt med dine SVG'er.

Lav dine egne SVG-animationer

Uanset om du er webdesigner, softwareudvikler eller blot en kreativ person, kan SVG-animationer være sjove og tilfredsstillende at lave. Du kan finde masser af ressourcer rundt omkring på nettet, der kan hjælpe dig med webbaseret animation, når du først er fortrolig med det grundlæggende.

10 CSS-baggrundsmønstre, du kan bruge på dit websted

Læs Næste