En nybegynnerveiledning til SVG-animasjon med CSS

Scalable Vector Graphics (SVG) er mer enn bare bildefiler. Som en XML-applikasjon inneholder SVG-er markeringer som ser ut og fungerer omtrent som HTML. Du kan også bruke dem sammen med CSS og JavaScript-kode. Dette gjør det mulig å animere SVG-filer, og skape komplekse bilder som fungerer godt for webdesign og andre dynamiske miljøer.

Men hvordan lager du en SVG-animasjon? Start med en SVG-form, animer den ved hjelp av CSS, og bygg på disse prinsippene for å bruke animasjon i ditt eget arbeid.

Animere SVG-er med HTML og CSS

Selv om du kan bruke JavaScript til å programmatisk animere SVG-er, har CSS nå god støtte for animasjoner også. Du finner all eksempelkoden på CodePen for dette prosjektet.

Bygge et SVG-bilde i HTML

Det første trinnet i denne prosessen er å bygge SVG-bildet du skal jobbe med. Du kan finne SVG-oppmerking i HTML-panelet på CodePen.

SVG-struktur

Mens SVG-er deler et lignende format som HTML, er kodene du bruker for å lage dem forskjellige. En SVG har åpnings- og lukkingskoder () som kan inneholde en rekke forskjellige egenskaper. I vårt tilfelle bruker vi

id og viewBox eiendommer. ID-egenskapen fungerer som enhver annen HTML-ID, og ​​gir deg en unik identifikator som kan brukes i CSS/JS. ViewBox-egenskapen angir størrelsen på SVG-en vår.

<!-- SVG med responsiv størrelse -->
<svg id="MUOSVGAanimasjon" viewBox="0 0 800 600">
<!-- SVG-innhold -->
</svg>

Du kan bruke egenskaper for bredde og høyde i stedet, som følgende eksempel viser. ViewBox lager imidlertid en responsiv SVG som vil matche størrelsen på visningsporten uten å bryte sideforholdet.

 SVG med en statisk størrelse 
<svg id="MUOSVGAanimasjon" bredde="800" høyde="600">
<!-- SVG-innhold -->
</svg>

SVG-former

Du kan lage detaljerte bilder med SVG-er, med en rekke forskjellige formverktøy til din disposisjon. Dette SVG-eksemplet bruker tre av formene som er tilgjengelige, men det er mange andre. Hver av figurene i dette eksemplet har en unik ID som CSS-animasjonene kan bruke senere.

• SVG Ellipse: Dette er et sirkel/ovalt verktøy. Den spesifiserer egenskaper for y/x-aksens radius (rx/ry), fyllfarge og strekbredde. Det er viktig å huske at radiusen du velger med dette verktøyet vil være halvparten av diameteren til formen.

<ellipse id="sirkel" rx="100" ry="100" fyll="#ffed00" slagbredde="0"/>

• SVG Rect: SVG rect-verktøyet lager en firkant eller et rektangel. Denne har egenskaper for bredde/høyde, en transformasjon, fyllfarge og strekbredde.

<rect id="torget" bredde="200" høyde="200" transform="oversett (300 200)" fyll="#05f"
 slagbredde="0"/>

• SVG-polygon: Bruk en SVG-polygon til å angi et spesifikt antall punkter og lage vilkårlige former av forskjellige størrelser. Polygonet i eksemplet er tresidig, noe som gjør det til en trekant, og du kan se posisjonen til hvert punkt plottet i egenskapene. Sammen med dette har vi egenskaper for posisjon, fyllfarge og strekbredde til trekanten.

<polygon id="triangel" poeng="15,-97 115,102 -84,102 15,-97"
 transform="oversett (0,0)" fyll="#f00" slagbredde="0"/>

Når animasjonen er på plass, vil figurene stå på linje ved siden av hverandre.

Disse tre SVG-formene er noen av de vanligste, men det er flere du kan velge mellom. Du kan bruke følgende former når arbeider med en SVG-animasjon:

• SVG-sirkel: Denne formen ligner på en ellipse, men den har alltid lik X- og Y-radius.
• SVG-linje: En SVG-linje er et enkelt linjesegment med to punkter, ett i hver ende.
• SVG Polyline: Polylinjer er som grunnleggende linjer, bare de kan ha mer enn to punkter.
• SVG-polygon: SVG-polygoner er som rektangler, bare de kan ha mer enn fire punkter, noe som gjør komplekse former mulig.
• SVG-bane: SVG-baner fungerer på samme måte som pennverktøyet i Adobe Photoshop. Linjer kan kobles sammen som en polylinje/polygon, men de kan også ha kurver påført.

Hvordan animere SVG-er med CSS

Nå som du har noen former inne i SVG-en din, er det på tide å gå videre til CSS-animasjonen. Hver av figurene har en annen animasjon for å demonstrere noen av alternativene du har, men det er mye mer å utforske med dine egne design. Sirkelen beveger seg over skjermen, firkantens hjørner blir runde, og trekanten roterer. Alle disse bruker CSS keyframes for å lage jevne animasjoner.

Flytte sirkelen ved hjelp av Transform og Translate

Sirkelen i SVG-eksemplet beveger seg fra bunnen til toppen av skjermen under animasjonssyklusen. Du må tilordne en animasjon til sirkelen før den kan flyttes, via en CSS-egenskap:

#sirkel {
 animasjon: circle_anim 2000ms lineær uendelig normal fremover
}

Det første ordet i verdien, sirkel_anim, er et navn for animasjonen. Den går i to sekunder (2000 ms). Den har en lineær kurve som holder hastigheten konsistent og er satt til å kjøre en uendelig antall ganger i fremover retning. Du kan bruke nøkkelbilder til å definere individuelle faser av animasjonen:

@keyframes sirkel_anim {
 0% { forvandle: oversette(155 piksler, 305 piksler) }
 45% { forvandle: oversette(155 piksler, -123 piksler) }
 50% { forvandle: oversette(-123 piksler, -123 piksler) }
 55% { forvandle: oversette(-123 piksler, 728 piksler) }
 60% { forvandle: oversette(155 piksler, 728 piksler) }
 100% { forvandle: oversette(155 piksler, 305 piksler) }
}

Det er seks nøkkelbilder i denne animasjonen, så sirkelen vil flytte seg til seks forskjellige steder i hver syklus. De transformere: oversette egenskap angir plasseringen av sirkelen på hvert trinn. Ved 0 % er sirkelen midt på skjermen og beveger seg opp og ut av synet med 45 %. Med 50 % har den flyttet seg til venstre på skjermen før den beveger seg ned under visningsporten ved 55 %. Sirkelen beveger seg tilbake til sin horisontale posisjon med 60 %, og animasjonen er fullført på 100 % med sirkelen tilbake i midten av skjermen.

Animer Squares Border Radius Property

Firkanten i eksemplet gir en god referanse for generelle eiendomsanimasjoner. Så lenge du vet den riktige syntaksen du skal bruke, kan du animere hvilken som helst CSS-egenskap. Grense-radius eiendommen er en god demonstrasjon av dette. Firkanten har skarpe hjørner som blir til avrundede hjørner og deretter tilbake til firkantede hjørner igjen.

#torget { animasjon: square_anim 2000 ms ease-in-out uendelig normal fremover }

Den firkantede animasjonen kalles square_anim og den har en kjøretid på to sekunder. De lette inn-ut kurve gjør animasjonen tregere i begynnelsen og slutten, og skaper en jevn effekt.

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

Som du kan se, har denne animasjonen fire nøkkelbilder. X- og Y-grenseradiusen endres fra 0px til 40px mellom 0% og 45%, og pauses ved 40px til 55%. Den går deretter tilbake til 0px for hver radius når animasjonen når 100 %.

Roter SVG-trekanten med Transform

Den endelige SVG-animasjonen i eksemplet er den enkleste, med trekanten som roterer rundt sitt midtpunkt. Formen fullfører en hel revolusjon hvert annet sekund og fortsetter å løpe i det uendelige. Den har en ease-out-kurve som resulterer i at animasjonen avtar på slutten. Animasjonen kalles triangle_anim.

#triangel { animasjon: triangle_anim 2000 ms ease-out uendelig normal fremover }

Denne animasjonen har to nøkkelbilder, en på 0 % og den andre på 100 %. Egenskapen Transform rotate snur trekanten fra 0 grader ved 0 % til 360 grader ved 100 %, og skaper et fullt spinn.

@keyframes triangle_anim {
 0% { forvandle: oversette(644 piksler, 297 piksler) rotere(0 grader) }
 100% { forvandle: oversette(644 piksler, 297 piksler) rotere(360 grader) }
}

Hvordan animere andre egenskaper

De tre animasjonene som er dekket ovenfor er et godt utgangspunkt når du jobber med SVG-er, men du vil sannsynligvis presse dette videre. Du kan bruke CSS-animasjonsregelen til å justere nesten hvilken som helst egenskapsverdi du kan tilordne til SVG-en. Dette inkluderer grunnleggende verdier, som størrelse og plassering, så vel som mer avanserte verdier, som kantlinjer, skygger og blandingsmoduser.

I sjeldne tilfeller der CSS ikke kan gjøre jobben, kan du bruke JavaScript-kode til å animere SVG-bilder. Du kan finne massevis av guider for å hjelpe deg med dette når du føler deg klar til å ta neste steg med SVG-ene dine.

Lag dine egne SVG-animasjoner

Enten du er en webdesigner, programvareutvikler eller bare en kreativ person, kan SVG-animasjoner være morsomme og tilfredsstillende å lage. Du kan finne mange ressurser rundt på nettet som kan hjelpe deg med nettbasert animasjon, når du først er komfortabel med det grunnleggende.

10 CSS-bakgrunnsmønstre du kan bruke på nettstedet ditt

Les Neste