En vy till skalbar vektorgrafik (SVG) Animation

Idag ska vi fortsätta diskussionen om Skalbar vektorgrafik (SVG), och den här gången ska vi jobba med SVG Animation. Var inte rädd men SVG Animation är relativt lätt och faktiskt i det här inlägget kommer vi att börja från grunderna.

Grundläggande genomförande

Animering i SVG kan genomföras element;

Som du kan se från kodavsnittet ovan lägger vi till inuti det element som kommer att påverkas. Detta innehåller några av följande attribut

attribute: Det här attributet anger vilket elements attribut som påverkas i animationen.

från: Det här attributet är valfritt, vi kan ange ett exakt värde eller lämna det för att låta det börja från var det var.

till: Detta attribut anger animeringsriktningen. Beroende på det angivna värdet i attribute, resultaten kan variera. Men i det här exemplet kommer det att förlänga höjd.

dur: Det här attributet anger animationsvaraktigheten. Värdet på detta attribut uttrycks i Klockvärdessyntax. Till exempel, 02:33 representerar 2 minuter och 33 sekunder, medan 3h är lika med 3 timmar, men vi behöver inte så länge så vi angav varaktigheten för bara 3s eller 3 sekunder;

Samma sak går till element, men den här gången riktar vi oss på cirkelens radiusattribut (r).

• Grundläggande implementeringsdemo

Flyttande element

Vid flyttning av SVG-element behöver vi bara rikta in elementets koordinat x och y;

I exemplet ovan flyttar vi rektangeln från 0 till 200 om 3 sekunder kommer rektangeln att röra sig horisontellt från vänster till höger. Också, om du tittar noggrant, lägger vi också till ett annat attribut till element, nämligen fylla.

fylla Attribut här är inget att göra med bakgrundsfärgen som i de andra SVG-elementen. Det här attributet anger hur animationen ska agera efter att varaktigheten slutar. I detta exempel vi frysa det drabbade elementet så det stannar där animationen slutar.

Det fungerar också på samma sätt som element som vi kan använda cx eller cy, såhär:

• Moving Element Demo

Animera flera attribut

Hittills strävar vi bara mot ett attribut som animeras, men det är också möjligt att animera mer än ett attribut samtidigt. Exemplet nedan visar hur vi gör det:

Som du kan se fungerar det på ett liknande sätt, bara nu har vi två element inuti att rikta in sig mot radie och den slagbredd Att vara påverkad.

• Demo med flera attribut

Följer en väg

I vårt tidigare inlägg på Arbeta med text i SVG, Vi har visat dig hur man flyter texten till en väg. Det är också möjligt att göra samma sak i SVG Animation, vi kan animera ett element för att följa en väg. Här är ett exempel.

Banan är bättre definierad inom a element, som visas ovan. För att elementet ska följa vägen måste vi definiera animationen med och länka vägen id med element, enligt följande;

Det är det, nu får vi se det i aktion;

• Följande sökväg

transformationer

Vi kan också använda transformation som skala, Översätt och rotera för animationen, och för att göra så ska vi använda ;

Transformationer i SVG delar liknande principer med CSS3, och vi har behandlat det ganska omfattande i vårt tidigare inlägg om CSS3 2D Transformation.

• Transformationsdemo

Slutgiltiga tankar

Beroende på din skicklighet på SVG Animation kan du skapa något så här.

En fördel med att använda SVG Animation över Flash Animation är att det inte är beroende av plugins från tredje part att fungera och det är också betydligt snabbare än Flash. När Adobe slutat sitt Flash-stöd i Android kanske du vill börja prova detta sätt att tjäna animering på din nästa webbplats.

Ytterligare referenser

• SVG animera dokumentation
• Avancerade SVG Animation Techniques

• Visa demo
• Hämta källa