Das SVG-Format löst mehr und mehr Flash für vektorbasierte und animierte Grafiken ab. Aufgrund der XML-Syntax des SVG-Formates lassen sich Grafiken im Grunde per Texteditor erstellen, was in den meisten Fällen jedoch wenig sinnvoll ist. Denn Zeichenprogramme wie Illustrator verfügen über die Möglichkeit, Grafiken ins SVG-Format zu exportieren. Animationen lassen sich damit allerdings nicht umsetzen, so dass hier doch der Texteditor zu Hilfe genommen werden muss. Allerdings ist es relativ einfach, mit Illustrator und einem Texteditor eine SVG-Grafik in Bewegung zu bringen – zum Beispiel als Morphing-Animation.
Formen in Illustrator zeichnen
Ein bewegtes Morphing entsteht, indem eine Zeichenform in eine andere Zeichenform animiert wird. Dazu müssen beide Formen zunächst in Illustrator angelegt werden. Wichtig ist, dass beide Formen mit demselben SVG-Element ausgezeichnet werden – zum Beispiel „<polygon>“ für einfache mehreckige Formen oder „<path>“ für komplexe Formen mit Kurven und Aussparungen. Auch die Anzahl der Koordinaten beziehungsweise Kurven müssen jeweils übereinstimmen. Ansonsten lassen sich die Transformationen nicht animieren.
Im Beispiel legen wir in Illustrator einen fünfzackigen Stern an und exportieren diesen als SVG-Datei. Anschließend ändern wir die Koordinaten des Sterns so, dass daraus ein Zehneck wird. Dieses Zehneck wird ebenfalls als SVG-Datei gespeichert. In beiden Grafiken sind jeweils zehn Koordinaten angegeben. Statt die Koordinaten zu ändern, kann man natürlich auch eine gänzlich neue Form zeichnen, solange diese dieselbe Anzahl von Koordinaten aufweist.
SVG-Optionem beim Speichern in Illustrator
Illustrator wird sowohl den Stern als auch das Zehneck jeweils als „<polygon>“-Element in der SVG-Datei auszeichnen. Sobald Bézierkurven oder verknüpfte Pfade zum Einsatz kommen, wird die Form als „<path>“-Element exportiert. Hier muss man einfach darauf achten und sich das exportierte Ergebnis einmal ansehen.
Formen zusammenbringen und animieren
Illustrator hat seine Arbeit für die animierte Form nun getan. Ab sofort wird mit dem Texteditor weitergearbeitet. Dort wird die erste SVG-Datei geöffnet und das entsprechende „<polygon>“-Element gesucht. Es besitzt eine „fill“-Eigenschaft, welche die Füllfarbe definiert, sowie eine „point“-Eigenschaft mit den zehn Koordinaten-Paaren bestehend aus jeweils einer X- und einer Y-Koordinate.
1 | <polygon fill="#FF8200" points="47.6,4.8 62.2,34.5 95.1,39.3 71.3,62.5 76.9,95.2 47.6,79.8 18.2,95.2 23.8,62.5 0,39.3 32.9,34.5" /> |
Zum Animieren von Formen gibt es das „<animate>“-Element, welches das jeweilige Elternelement in Bewegung versetzt. Daher muss es als Kindelement des Polygons im Quelltext platziert werden.
1 2 3 | <polygon fill="#FF8200" points="47.6,4.8 62.2,34.5 95.1,39.3 71.3,62.5 76.9,95.2 47.6,79.8 18.2,95.2 23.8,62.5 0,39.3 32.9,34.5"> <animate attributeName="points" to="47.6,0 76.9,9.5 95.1,34.5 95.1,65.5 76.9,90.5 47.6,100 18.2,90.5 0,65.5 0,34.5 18.2,9.5" dur="500ms" repeatCount="indefinite" /> </polygon> |
Das „<animate>“-Element besitzt mindestens drei Eigenschaften. Mit „attributeName“ wird die Eigenschaft des Elternelements angegeben, die per Animation verändert werden soll. In unserem Beispiel ist es das „point“-Element des Polygons. Die Eigenschaft „to“ enthält den Zielwert für die Eigenschaft, die per „attributeName“ angegeben ist. In diesem Fall sind es also die Koordinaten des Zehnecks. Dazu kopieren wir die Koordinaten – also den Wert des „point“-Attributes der zweiten SVG-Datei – und weisen sie der „to“-Eigenschaft als Wert zu.
Animationsablauf vom Stern zum Zehneck
Während das „<polygon>“-Element in der „point“-Eigenschaft also die Koordinaten für den Stern hat, besitzt das „<animate>“-Element in der „to“-Eigenschaft die Koordinaten des Zehnecks. Per „dur“-Eigenschaft wird noch die Dauer der Animation angegeben. Ruft man die SVG-Datei im Browser auf, wird der Stern innerhalb einer halben Sekunde in ein Zehneck verwandelt. Will man die Animation mehrmals oder dauerhaft ausführen, gibt man über die Eigenschaft „repeatCount“ die Anzahl der Wiederholungen oder „indefinite“ für dauerhafte Wiederholungen an.
Hin und zurück animieren
In unserem Beispiel wiederholt sich die Transformation vom Stern zum Zehneck zwar dauerhaft. Allerdings findet keine Animation vom Zehneck zurück zum Stern statt. Will man eine rückläufige Animation ergänzen, um jeweils fließend ins Zehneck und wieder zurück zum Stern zu transformieren, muss die „<animate>“-Eigenschaft etwas verändert werden.
Statt der „to“-Eigenschaft, welche nur ein Ziel für eine Animation beinhaltet, wird die „values“-Eigenschaft verwendet. Der Vorteil von „values“ ist, dass dort beliebig viele Animationsschritte hinterlegt werden können. Per Semikolon voneinander getrennt, lassen sich also beliebige viele Koordinaten für das „<polygon>“-Element angeben. Diese werden nacheinander abgearbeitet und somit animiert.
Für unser Beispiel müsen per „values“-Eigenschaft drei Animationsschritte angegeben werden. Als erster und letzter Wert für „values“ werden die Koordinaten des Sterns verwendet. Als zweiter Wert werden die Koordinaten des Zehneckes angegeben.
1 2 3 | <polygon fill="#FF8200" points="47.6,4.8 62.2,34.5 95.1,39.3 71.3,62.5 76.9,95.2 47.6,79.8 18.2,95.2 23.8,62.5 0,39.3 32.9,34.5"> <animate attributeName="points" values="[Sternkoordinaten]; [Zehneckkoordinaten]; [Sternkoordinaten]" dur="500ms" repeatCount="indefinite" /> </polygon> |
Da Start- und Endpunkt für die Animation jeweils die Koordinaten des Sterns sind, endet und beginnt die Animation jeweils mit derselben Form.
Animation per Klick starten
Mit einer weiteren Eigenschaft kann man die Animation erst dann beginnen lassen, wenn die Form angeklickt wird. Dazu muss einfach die Eigenschaft „begin“ mit dem Wert „click“ ergänzt werden.
1 2 3 | <polygon fill="#FF8200" points="47.6,4.8 62.2,34.5 95.1,39.3 71.3,62.5 76.9,95.2 47.6,79.8 18.2,95.2 23.8,62.5 0,39.3 32.9,34.5"> <animate begin="click" attributeName="points" values="[Sternkoordinaten]; [Zehneckkoordinaten]; [Sternkoordinaten]" dur="500ms" repeatCount="indefinite" /> </polygon> |
Mehr Möglichkeiten hat man, wenn man JavaScript zur Steuerung der Animation einsetzt. So ist es möglich, per Klick die Animation zum Zehneck und per weiterem Klick die Animation zurück zum Stern zu starten. Dazu müssen zwei verschiedene „<animate>“-Elemente definiert werden. Das erste Element enthält die Koordinaten zum Zehneck, das zweite die Koordinaten zum Stern. Da jeweils nur ein Zielwert für die Animation pro „<animate>“-Element angegeben wird, verwenden wir wieder die „to“-Eigenschaft.
1 2 3 4 | <polygon fill="#FF8200" points="47.6,4.8 62.2,34.5 95.1,39.3 71.3,62.5 76.9,95.2 47.6,79.8 18.2,95.2 23.8,62.5 0,39.3 32.9,34.5"> <animate attributeName="points" to="[Zehneckkoordinaten]" dur="500ms" begin="indefinite" fill="freeze" /> <animate attributeName="points" to="[Sternkoordinaten]" dur="500ms" begin="indefinite" fill="freeze" /> </polygon> |
Außerdem wird der Eigenschaft „begin“ der Wert „indefinite“ zugewiesen, um zu verhindern, dass die Animation ohne Zutun des Nutzers gestartet wird. Die Eigenschaft „fill“ bekommt den Wert „freeze“ zugewiesen, um zu erreichen, dass am Ende der Animation das animierte Bild beibehalten wird. Andernfalls würde zum Ausgangsbild der Animation zurückgekehrt werden.
Mit ein paar Zeilen JavaScript kann man nun jeweils eine der beiden „<animate>“-Eigenschaften ausführen.
1 2 3 4 5 6 7 8 9 | document.getElementsByTagName("polygon")[0].addEventListener("click", function() { if (document.getElementsByTagName("polygon")[0].getAttribute("class") != "zehneck") { document.getElementsByTagName("polygon")[0].setAttribute("class", "zehneck"); document.getElementsByTagName("animate")[0].beginElement(); } else { document.getElementsByTagName("polygon")[0].setAttribute("class", ""); document.getElementsByTagName("animate")[1].beginElement(); } }, false); |
Im Beispiel wird dem Polygon per „addEventListener()“ eine Funktion zugewiesen, die per Klick auf das Element jeweils aufgerufen wird. Je nach zugewiesener Klasse des „<polygon>“-Elementes wird die erste oder zweite Animation ausgeführt – per Methode „beginElement()“.
Verwendet man JavaScript für die Steuerung von SVG-Grafiken, dürfen diese nicht per „<img>“-Element in einem HTML-Dokument eingebunden sein. Man sollte die SVG-Grafik entweder per „<embed>“-Element einbinden oder direkt ins HTML-Dokument implementieren.
Browser, die zwar das SVG-Format beherrschen, aber mit SVG-Animationen noch nichts anfangen können, werden nur die Ausgangsform der Animation darstellen.
(dpe)