Ein Blick in skalierbare Vektorgrafiken (SVG)

Heute werden wir unsere Diskussion fortsetzen Skalierbare Vektorgrafik (SVG), und diesmal werden wir mit arbeiten SVG-Animation. Keine Angst, SVG-Animation ist relativ einfach und in diesem Beitrag werden wir mit den Grundlagen beginnen.

Grundlegende Implementierung

Animationen in SVG können durch durchgeführt werden Element;

Wie Sie dem obigen Code-Snippet entnehmen können, fügen Sie das Innerhalb das Element, das betroffen sein wird. Diese enthält einige der folgenden Attribute;

Attributname: Dieses Attribut gibt an, welches Attribut eines Elements in der Animation betroffen ist.

von: Dieses Attribut ist optional. Wir können einen genauen Wert angeben oder belassen, damit es an dem Punkt beginnen kann, an dem es war.

zu: Dieses Attribut gibt die Animationsrichtung an. Abhängig vom angegebenen Wert in Attributname, Die Ergebnisse können variieren. Aber in diesem Beispiel wird das erweitert Höhe.

dur: Dieses Attribut gibt die Animationsdauer an. Der Wert dieses Attributs wird in Clock Value Syntax ausgedrückt. Zum Beispiel, 02:33 steht für 2 Minuten und 33 Sekunden, während 3h ist gleich 3 Stunden, aber wir brauchen nicht so lange, also haben wir die Dauer für nur angegeben 3s oder 3 Sekunden;

Das gleiche gilt für Element, aber diesmal zielen wir auf das Radiusattribut des Kreises (r).

Demo zur grundlegenden Implementierung

Element verschieben

Beim Verschieben von SVG-Elementen müssen wir nur die Koordinate des Elements anvisieren x und y;

Im obigen Beispiel verschieben wir das Rechteck von 0 zu 200 In 3 Sekunden erscheint das Rechteck horizontal von links nach rechts. Wenn Sie genau hinschauen, haben wir auch ein weiteres Attribut hinzugefügt Element, nämlich füllen.

füllen Das Attribut hier hat nichts mit der Hintergrundfarbe zu tun wie in den anderen SVG-Elementen. Dieses Attribut gibt an, wie sich die Animation nach Ablauf der Dauer verhält. In diesem Beispiel haben wir einfrieren Das betroffene Element bleibt also dort, wo die Animation endet.

Es funktioniert auch ähnlich wie das Element können wir verwenden cx oder cy, wie so:

Movement Element Demo

Animieren Sie mehrere Attribute

Bislang zielen wir nur auf ein zu animierendes Attribut, es ist jedoch auch möglich, mehr als ein Attribut gleichzeitig zu animieren. Das folgende Beispiel zeigt, wie wir das machen:

Wie Sie sehen, funktioniert es ähnlich, nur jetzt haben wir zwei Elemente innerhalb der zielen auf die Radius und das Strichbreite betroffen sein.

Mehrere Attribute Demo

Einem Pfad folgen

In unserem vorherigen Post am Arbeiten mit Text in SVG, Wir haben Ihnen gezeigt, wie Sie den Text auf einen Pfad übertragen können. Es ist auch möglich, dasselbe in zu tun SVG-Animation, Wir können ein Element animieren, um einem Pfad zu folgen. Hier ist ein Beispiel.

Der Pfad wird innerhalb von a besser definiert Element wie oben gezeigt. Damit das Element dem Pfad folgen kann, muss die Animation mit definiert werden und verlinken Sie den Pfad Ich würde mit Element wie folgt;

Das ist es, jetzt sehen wir es in Aktion;

Dem Path-Demo folgen

Transformationen

Wir können Transformation auch gerne verwenden Rahmen, Übersetzen und drehen für die Animation, und dazu verwenden wir ;

Transformations in SVG hat ähnliche Prinzipien wie CSS3, und wir haben in unserem letzten Post über CSS3 2D Transformation ausführlich darüber gesprochen.

Transformations-Demo

Abschließende Gedanken

Je nachdem, was Sie mit SVG-Animation wissen, können Sie so etwas erstellen.

Ein Vorteil der Verwendung von SVG-Animation gegenüber Flash-Animation besteht darin, dass sie nicht auf Plugins von Drittanbietern angewiesen ist und auch wesentlich schneller als Flash ist. Nachdem Adobe die Flash-Unterstützung in Android eingestellt hat, möchten Sie möglicherweise diesen Ansatz ausprobieren, um Animationen auf Ihrer nächsten Website bereitzustellen.

Weitere Referenzen

SVG-Animationsdokumentation
Fortgeschrittene SVG-Animationstechniken

Demo anzeigen
Quelle herunterladen