Een kijkje in Scalable Vector Graphics (SVG) -animatie

Vandaag gaan we onze discussie voortzetten Scalable Vector Graphic (SVG), en deze keer gaan we ermee werken SVG-animatie. Wees echter niet bang, SVG Animation is relatief eenvoudig en in deze post beginnen we met de basis.

Basisimplementatie

Animatie in SVG kan worden gedaan via element;

Zoals u kunt zien aan de hand van het bovenstaande codefragment, voegen we de binnen het element dat zal worden beïnvloed. Deze bevat enkele van de volgende kenmerken;

attribuut naam: Dit kenmerk geeft aan welk attribuut van een element in de animatie zal worden beïnvloed.

van: Dit kenmerk is optioneel, we kunnen een exacte waarde specificeren of het laten staan om te starten vanaf waar het was.

naar: Dit kenmerk geeft de richting van de animatie aan. Afhankelijk van de opgegeven waarde in attribuut naam, de resultaten kunnen variëren. Maar in dit voorbeeld verlengt het de hoogte.

dur: Dit kenmerk geeft de duur van de animatie aan. De waarde van dit kenmerk wordt uitgedrukt in Clock Value Syntax. Bijvoorbeeld, 02:33 staat voor 2 minuten en 33 seconden, terwijl 3h is gelijk aan 3 uur, maar dat hebben we niet zo lang nodig, daarom hebben we de duur voor juist opgegeven 3s of 3 seconden;

Hetzelfde gaat naar element, maar deze keer richten we ons op het straalattribuut van de cirkel (r).

Basic Implementation Demo

Element verplaatsen

Bij het verplaatsen van SVG-elementen hoeven we alleen de coördinaat van het element te targeten X en Y;

In het bovenstaande voorbeeld verplaatsen we de rechthoek van 0 naar 200 in 3 seconden verschijnt de rechthoek horizontaal van links naar rechts. Ook als je goed kijkt, hebben we ook een ander attribuut toegevoegd aan de element, namelijk vullen.

vullen kenmerk hier heeft niets te maken met de achtergrondkleur zoals in de andere SVG-elementen. Dit kenmerk geeft aan hoe de animatie zal werken nadat de duur is afgelopen. In dit voorbeeld wij bevriezen het getroffen element zodat het blijft waar de animatie eindigt.

Het werkt ook op dezelfde manier als de element, we kunnen gebruiken cx of cy, zoals zo:

Demo van element verplaatsen

Animate Multiple Attributes

Tot nu toe targeten we slechts één attribuut om geanimeerd te worden, maar het is ook mogelijk om meer dan één attribuut in één keer te animeren. Het onderstaande voorbeeld laat zien hoe we het doen:

Zoals je kunt zien, werkt het op dezelfde manier, alleen nu hebben we er twee elementen binnen de om het te richten radius en de streekbreedte beïnvloed worden.

Multiple Attributes Demo

Een pad volgen

In ons vorige bericht op Werken met tekst in SVG, we hebben je laten zien hoe je de tekst naar een pad kunt laten stromen. Het is ook mogelijk om hetzelfde te doen in SVG-animatie, we kunnen een element animeren om een pad te volgen. Hier is een voorbeeld.

Het pad is beter gedefinieerd in a element, zoals hierboven weergegeven. Om ervoor te zorgen dat het element het pad volgt, moeten we de animatie definiëren met en koppel het pad ID kaart met element, als volgt;

Dat is alles, laten we het nu in actie zien;

De paddemo volgen

transformaties

We kunnen ook transformatie zoals gebruiken schaal, vertalen en draaien voor de animatie, en om dit te doen zullen we gebruiken ;

Transformaties in SVG delen soortgelijke principes als CSS3, en we hebben er uitgebreid over gediscussieerd in ons vorige artikel over CSS3 2D-transformatie.

Transformatie Demo

Laatste gedachten

Afhankelijk van je bekwaamheid op SVG-animatie kun je zoiets als dit maken.

Een voordeel van het gebruik van SVG-animatie via Flash-animatie is dat het niet afhankelijk is van externe plug-ins om te werken, maar ook aanzienlijk sneller dan Flash. Nadat Adobe hun Flash-ondersteuning in Android had stopgezet, zou je deze aanpak eens kunnen uitproberen om animaties op je volgende website te presenteren.

Verdere referenties

SVG Animate-documentatie
Geavanceerde SVG-animatietechnieken

Demo bekijken
Download de bron