En titt i Scalable Vector Graphics (SVG) Animasjon

I dag skal vi fortsette vår diskusjon om Skalerbar vektorgrafikk (SVG), og denne gangen skal vi jobbe med SVG Animasjon. Ikke vær redd skjønt, SVG Animation er relativt enkelt og faktisk i dette innlegget vil vi starte fra det grunnleggende.

Grunnleggende implementering

Animasjon i SVG kan gjøres gjennom element;

Som du kan se fra kodestykket ovenfor, legger vi til innsiden elementet som skal påvirkes. Dette inneholder noen av følgende attributter;

AttributeName: Dette attributtet angir hvilket elements attributt som vil bli påvirket i animasjonen.

fra: Dette attributtet er valgfritt, vi kan angi en eksakt verdi, eller la den være å la den starte fra hvor den var.

til: Dette attributtet angir animasjonsretningen. Avhengig av den angitte verdien i AttributeName, resultatene kan variere. Men i dette eksemplet vil det forlenge høyde.

dur: Dette attributtet angir animasjonsvarigheten. Verdien av dette attributtet er uttrykt i Clock Value Syntax. For eksempel, 02:33 representerer 2 minutter og 33 sekunder, mens 3t er lik 3 timer, men vi trenger ikke så lenge, så vi angitte varigheten for bare 3s eller 3 sekunder;

Det samme går til element, men denne gangen målretter vi på sirkelens radiusattributt (r).

• Grunnleggende implementeringsdemo

Flytende element

Ved flytting av SVG-elementer trenger vi bare å målrette elementets koordinat x og y;

I eksempelet ovenfor beveger vi rektangelet fra 0 til 200 om 3 sekunder vil rektanglet bevege seg horisontalt fra venstre til høyre. Også, hvis du ser nøye ut, har vi også lagt til et annet attributt til element, nemlig fylle.

fylle Attributt her er ingenting å gjøre med bakgrunnsfargen som i de andre SVG-elementene. Denne egenskapen angir hvordan animasjonen vil fungere etter at varigheten er avsluttet. I dette eksemplet vi fryse det berørte elementet, slik at det forblir der animasjonen slutter.

Det fungerer også på samme måte som element, vi kan bruke cx eller cy, som så:

• Moving Element Demo

Animer flere attributter

Så langt har vi bare målrettet ett attributt for å bli animert, men det er også mulig å animere mer enn ett attributt på en gang. Eksempelet nedenfor viser hvordan vi gjør det:

Som du kan se, fungerer det på en lignende måte, bare nå har vi to elementer inne i å målrette mot radius og strekkbredde å bli påvirket.

• Demo med flere attributter

Følger en sti

I vårt tidligere innlegg på Arbeide med tekst i SVG, Vi har vist deg hvordan du kan flytte teksten til en bane. Det er også mulig å gjøre det samme SVG Animasjon, Vi kan animere et element som følger en bane. Her er et eksempel.

Veien er bedre definert innenfor a element, som vist ovenfor. For at elementet skal følge banen, må vi definere animasjonen med og lenke banen id med element, som følger;

Det er det, la oss se det i aksjon;

• Følgende banedemo

trans~~POS=TRUNC

Vi kan også bruke transformasjon som skala, oversette og rotere for animasjonen, og for å gjøre det skal vi bruke ;

Transformasjoner i SVG aksjer liknende prinsipper med CSS3, og vi har dekket det ganske omfattende i vårt tidligere innlegg om CSS3 2D Transformation.

• Transformasjonsdemo

Siste tanker

Avhengig av ferdighetene dine på SVG Animation kan du opprette noe som dette.

En fordel ved å bruke SVG Animation over Flash Animation er at den ikke stole på tredjepartsplugins for å fungere, og det er også betydelig raskere enn Flash. Etter at Adobe stoppet Flash-støtten i Android, vil du kanskje begynne å prøve denne fremgangsmåten for å vise animasjon på ditt neste nettsted.

Ytterligere referanser

• SVG Animate Documentation
• Avanserte SVG-animasjonsteknikker

• Se demo
• Last ned kilde