SVG Circus: Animationen per Web App

Mit dem SVG-Format ist es nicht nur möglich, statische Vektorgrafiken zu erstellen. Auch Animationen lassen sich damit realisieren. Während Grafikprogramme wie Adobe Illustrator das Speichern statischer SVG-Formate ermöglichen, gibt es kaum Anwendungen, mit denen auch SVG-Animationen erstellt werden können. Über die Web App SVG Circus können genau solche animierten Grafiken im SVG-Format angelegt werden. Anders als bei vielen JavaScript-SVG-Frameworks muss man hier weder JavaScript, noch SVG-Auszeichnung beherrschen. Alles läuft über eine grafische Oberfläche, die sehr einfach zu bedienen ist.

Akteure erstellen

Mit dem SVG Circus erstellt man in drei Schritten einfache SVG-Animationen. Zunächst werden grafische Elemente – sogenannte „Actors“ – angelegt. Leider hat man hier nur die Wahl zwischen Kreisen, Quadraten und Polygonen. Bei den Polygonen können die einzelnen Koordinaten nicht frei definiert werden. Vielmehr hat man nur die Möglichkeit, die Anzahl der Seiten zu definieren. Es wird dann jeweils ein gleichseitiges Polygon erstellt.

Für jeden „Actor“ werden Größe und Position definiert. Außerdem kann man Füll- und Rahmenfarbe, sowie eine Transparenz festlegen. Neben der Stärke des Rahmens lassen sich auch gestrichelte Linien anlegen. Dabei kann man die Größe der Striche sowie den Abstand der Striche zueinander angeben.

Übersichtliche Bedienoberfläche: hier „Actors“-Bereich

Es können mehrere „Actors“ erstellt und benannt werden. Diese werden auf einer Arbeitsfläche platziert. Leider ist es nicht möglich, Größe und Position der Akteure direkt auf der Arbeitsfläche zu verändern. Für die Arbeitsfläche kann man zudem keine feste Größe angeben. Allerdings besteht die Möglichkeit, verschiedene Vorschaugrößen für die Ausgabe auszuwählen. Auch eine Farbe für den Hintergrund ist wählbar. Diese Hintergrundfarbe dient aber ebenfalls nur zur Vorschau. Sie wird nicht in der SVG-Grafik eingebunden.

Animationen per „Trick“ anlegen

Sind die Akteure angelegt und auf der Arbeitsfläche platziert, müssen sogenannte „Tricks“ definiert werden. Über einen Trick wird eine Animation für die einzelnen Akteure definiert. Dazu stellt SVG Circus mehrere anpassbare Vorgaben zur Verfügung. Per „Run“ wird beispielsweise eine Bewegung angelegt. Die Bewegung erfolgt auf der Bahn eines Kreises, eines Rechtecks oder einer Linie. Dabei können Größe und Position der Strecke, auf der sich ein Akteur bewegen soll, jeweils über Schieberegler oder Eingabefelder festgelegt werden.

„Tricks“-Bereich mit Arbeitsfläche und den Vorschaueinstellungen

Alternativ zu einer Bewegung per „Run“ kann man einen Akteur auch ein- und ausblenden lassen („Fade“). Darüber hinaus gibt es die Möglichkeit, Drehungen („Rotate“), Skalierungen („Scale“) sowie Verzerrungen („Skew“) auf einen Akteur anzuwenden. Je nach ausgewähltem Typ stehen einem unterschiedliche Einstellungsoptionen zur Verfügung.

Für jede Animation wählt man zudem eine Easing-Methode aus. Hier stehen zahlreiche Varianten zur Verfügung – von linearen, über kubische bis zu elastischen Animationen.

Wie auch bei den „Actors“ können auch mehrere „Tricks“ angelegt und benannt werden.

Akteure und „Tricks“ auf ein Szenario anwenden

Nachdem „Actors“ und „Tricks“ angelegt sind, werden im letzten Schritt die „Tricks“ auf die Akteure  innerhalb eines Szenarios angewendet. Ein Szenario stellt eine Animation dar, bei der zunächst eine Startzeit sowie die Animationslänge definiert werden. Anschließend werden beliebig viele der angelegten „Tricks“ ausgewählt. So können etwa Bewegungen und Drehungen kombiniert werden.

Für jeden „Trick“ lässt sich ein Zeitraum innerhalb der Animationsdauer festlegen. So kann eine Bewegung zum Beispiel über den gesamten Animationszeitraum oder eine Drehung nur in der zweiten Hälfte des Zeitraums der Animation ausgeführt werden.

„Scenario“-Bereich

Anschließend werden noch die Akteure ausgewählt, welche mit den vorher zusammengestellten „Tricks“ animiert werden sollen. Optional lässt sich noch eine Verzögerung definieren, so dass die einzelnen Akteure nicht gleichzeitig, sondern zeitlich versetzt animiert werden. Auch die Anzahl der Wiederholungen kann man festlegen – von einer bis 20. Alternativ lassen sich Animationen in einer Endlosschleife ausführen.

Auf der Arbeitsfläche sieht man stets eine Vorschau der Akteure und der anwendeten „Tricks“, so dass Veränderungen immer direkt sichtbar sind. Außerdem gibt es mehrere Hilfsraster, die nach Belieben eingeblendet werden können.

SVG-Export mit Quelltext

Ist die komplette Animation fertig, kann diese ins SVG-Format exportiert werden. SVG Circus generiert für den Export den SVG-Quelltext, der in der Zwischenablage abgelegt wird. Über einen Texteditor kann man den Quelltext dann in eine Datei kopieren und als SVG-Datei abspeichern.

Quelltext-Export für die SVG-Animation

Zwar verfügt das SVG-Format über eigene Animationselemente – „<animate>“, „<animateMotion>“ und „<animateTransform>“ –, mit denen unterschiedliche Bewegungen ohne JavaScript realisiert werden können. Dennoch verwendet SVG Circus JavaScript, um die SVG-Elemente in Bewegung zu bringen. Daher enthält jeder SVG-Quelltext auch einen JavaScript-Bereich. Dieser sorgt dafür, dass die „transform“-Eigenschaft der angelegten Formen für die Animation jeweils geändert wird.

Fazit und Link zum Beitrag

Das Schöne an SVG Circus ist die Möglichkeit, sämtliche Einstellungen über eine grafische Oberfläche vornehmen zu können. Das ist für alle interessant, die sich mit der SVG-Syntax noch nicht auskennen. Leider sind die Möglichkeiten sehr beschränkt. So können nur einfache geometrische Formen angelegt werden. Schön wäre es, könnte man SVG-Grafiken importieren und diese dann animieren lassen.

Allerdings veranschaulicht SVG Circus sehr schön die Möglichkeiten, die einem das SVG-Format für Animationen bereitstellt. Somit stellt die Webanwendung auf jeden Fall einen guten Einstieg in das Thema SVG-Animationen dar. Außerdem gibt es einige sehr anschauliche „Animation Presets“. Diese enthalten sehr unterschiedliche Animationen, die sich über die Oberfläche einfach anpassen lassen.

Da SVG Circus unter der MIT-Lizenz steht und der gesamte Quelltext der App bei GutHub heruntergeladen und bearbeitet werden kann, lässt sich daraus natürlich eine weitaus umfangreichere Webanwendung mit erweitertem Funktionsumfang bauen. Voraussetzung dafür ist, dass Node, NPM und Bower installiert sind.

• SVG Circus