SVG-Animationen mit Raphaël

Im Allgemeinen versteht man unter einer Animation eine zeitlich allmählich ablaufende Änderung des Zustands eines Objektes. Diese Änderung kann z.B. die Form und die farbliche Gestaltung des Objektes betreffen. Im Grunde geht es um alle irgendwie definierten Objekteigenschaften. Die unterschiedlichen Möglichkeiten der SVg-Animation wurden bereits im Abschnitt SVG Animationen dargelegt. Raphaël vereint die Funktionen zum Erzeugen der SVG-Objekte udn zu ihrer Animation.

Unterschiede bei der Auslösung der Animation

Man kann zwei unterschiedliche Möglichkeiten unterscheiden, mit denen eine Animation ausgelöst wird:

• die Animation startet automatisch beim Aufruf der Webseite, dass die Animation enthält
• die Animation wird durch eine Aktion des Nutzers ausgelöst, hier kommen die Event Handler ins Spiel.

Ich werde hier in erster Linie mit Beispielen arbeiten, bei denen der Benutzer die Animation auslöst, damit diese besser am Bildschirm verfolgt werden können.

Funktionsvorrat

Im Zusammenhang mit der Erzeugung und Steuerung von Animation sind die folgenden Funktionen von Bedeutung

• animationsname.delay(verzoegerungswert) - gibt an, mit welcher Verzögerung in Millisekunden eine Aniamtion gestartet werden soll
• animationsname.repeat(wiederholungswert) - gibt an, wie oft eine Animation ausgeführt werden soll, Dabei gibt Infinity an, dass eine Animation unbegrenzt häufig ausgeführt werden soll.
• svgelement.animate(animationsparamter, animationsdauer, easingeigenschaft) - erstellt und startet eine Animation. animationsparamter gibt an, welche Eigenschaften im Rahmen der Animation geändert werden sollen.