En visning i Scalable Vector Graphics (SVG) Animation

I dag skal vi fortsætte vores diskussion om Scalable Vector Graphic (SVG), og denne gang skal vi arbejde sammen med SVG Animation. Vær ikke bange, men SVG Animation er forholdsvis let og faktisk i dette indlæg starter vi fra det grundlæggende.

Grundlæggende implementering

Animation i SVG kan gøres gennem element;

Som du kan se fra kodestykket ovenfor, tilføjer vi inde det element, der skal påvirkes. Dette indeholder nogle af følgende attributter;

AttributeName: Denne attribut angiver hvilket elements attribut der vil blive påvirket i animationen.

fra: Denne attribut er valgfri, vi kan angive en nøjagtig værdi eller lade den starte, hvor den var.

til: Denne attribut angiver animationsretningen. Afhængig af den angivne værdi i AttributeName, resultaterne kan variere. Men i dette eksempel vil det udvide højde.

dur: Denne attribut angiver animationsvarigheden. Værdien af ​​denne attribut er udtrykt i Clock Value Syntax. For eksempel, 02:33 repræsenterer 2 minutter og 33 sekunder, mens 3h er lig med 3 timer, men vi behøver ikke så længe, ​​så vi angav varigheden for bare 3s eller 3 sekunder

Det samme går til element, men denne gang målretter vi på cirkelens radiusattribut (r).

• Grundlæggende implementeringsdemo

Flytende element

Ved bevægelse af SVG-elementer behøver vi kun at målrette mod elementets koordinat x og y;

I eksemplet ovenfor flytter vi rektanglet fra 0 til 200 Om 3 sekunder vises rektanglet vandret fra venstre til højre. Også, hvis du ser forsigtigt ud, tilføjer vi også en anden attribut til element, nemlig fylde.

fylde attribut her er intet at gøre med baggrundsfarven som i de andre SVG elementer. Denne egenskab angiver, hvordan animationen vil virke, efter at varigheden er afsluttet. I dette eksempel vi fryse det berørte element, så det forbliver hvor animationen slutter.

Det fungerer også på samme måde som element, vi kan bruge cx eller cy, ligesom:

• Moving Element Demo

Animér flere attributter

Indtil videre har vi kun målrettet mod en attribut, der skal animeres, men det er også muligt at animere mere end én attribut på én gang. Nedenstående eksempel viser, hvordan vi gør det:

Som du kan se, fungerer det på en lignende måde, kun nu har vi to elementer inde i at målrette mod radius og slagbredde at blive påvirket.

• Demo med flere attributter

Efter en sti

I vores tidligere indlæg på Arbejder med tekst i SVG, Vi har vist dig, hvordan du flyder teksten til en sti. Det er også muligt at gøre det samme SVG Animation, vi kan animere et element til at følge en sti. Her er et eksempel.

Stien er bedre defineret inden for a element, som vist ovenfor. For at elementet skal følge stien, skal vi definere animationen med og link stien id med element, som følger;

Det er det, lad os nu se det i aktion;

• Følgende sti demo

Transformations

Vi kan også bruge transformation som vægt, Oversætte og rotere til animationen, og for at gøre det vil vi bruge ;

Transformationer i SVG deler lignende principper med CSS3, og vi har behandlet det helt i vores tidligere indlæg om CSS3 2D Transformation.

• Transformation Demo

Afsluttende tanker

Afhængigt af din færdighed på SVG Animation kan du oprette noget som dette.

En fordel ved at bruge SVG Animation over Flash Animation er, at den ikke er afhængig af tredjeparts plugins til at arbejde, og det er også betydeligt hurtigere end Flash. Efter at Adobe har stoppet deres Flash-understøttelse i Android, kan du måske begynde at prøve denne fremgangsmåde til at tjene animation på din næste hjemmeside.

Yderligere referencer

• SVG Animate Documentation
• Avancerede SVG animationsteknikker

• Se Demo
• Download kilde