SVG/ Animation
Aus Wikibooks
Der SVG-Standard unterstützt vielfältige Animationsmöglichkeiten, basierend auf dem Animationsteil von SMIL und einigen Zusätzen speziell für SVG. Die Referenz des W3C für SMIL findet man hier und für die SVG-Implementierungen hier.
Die Unterstützung von SMIL-Animationen in Browsern und Anwendungen die SVG verwenden ist allerdings mehr als lückenhaft (eine Übersicht der Implementierungen) darum empfehlen wir die Beispiele mit Batik Squiggle zu betrachten und zu bearbeiten. Opera, Safari und Google Chrome haben eine recht ordentliche Unterstützung für SVG-SMIL, Firefox hat voraussichtlich erst mit der Version 3.6 eine SVG-SMIL Unterstützung, wie auch immer mit fakesmile gibt es eine Javascript-Bibliothek die entweder in einer SVG Datei eingebunden werden kann oder in Greasemonkey um eine generelle Unterstützung zu erreichen.
Inhaltsverzeichnis |
[Bearbeiten] Grundlagen
Betrachten wir mal dieses Rechteck:
<rect width="5px" height ="5px" />
Wenn wir daraus eine SMIL-Animation erstellen wollen in der sich die Maße des Rechtecks innerhalb von 10 Sekunden von 10 x 100 Punkt in 100 x 10 Punkte verwandelt sieht es so aus:
<rect width="5px" height ="5px"> <animate attributeName="width" from="10px" to="100px" begin="0s" dur="10s" /> <animate attributeName="height" from="100px" to="10px" begin="0s" dur="10s" /> </rect>
[Bearbeiten] Animate
Wir lernen hier das erste SMIL-Element kennen <animate>, <animate> wird als Kindelement in das zu animierende Element eingebunden. Folgende Attribute werden Animate mit auf den Weg gegeben:
| Attribut | Funktion |
|---|---|
| attributeName | Name des zu animierenden Attributes |
| from | Startwert |
| to | Endwert |
| begin | Wann die Animation ausgelöst werden soll |
| dur | Dauer der Animation |
Es gibt noch weitere Attribute die wir später noch kennen lernen werden.
[Bearbeiten] begin
Aller Anfang ist ein Beginn, darum ist das begin Attribut sicher auch der richtige Anfang. Sobald der Browser oder das Anzeigeprogramm unsere SVG-Datei geladen hat läuft die Zeit, wenn wir wollen das sich unser Element sofort in der Sekunde Null anfängt zu bewegen teilen wir es genau so mit begin="0s" sollte es doch lieber 3 Sekunden später sein schreiben wir begin="3s" wir können aber auch statt Sekunden mit "s" Minuten mit "m" und Stunden mit "h" eintragen. Aber es gibt immer auch eine Zeit vor der Sekunde, Minute und Stunde Null und man will nicht immer alles sehen was schon passiert ist, kein Problem wir können auch negative Zeitangaben verwenden begin="-10s" zur Sekunde Null wird es dann so angezeigt als ob unser animiertes Element schon 10 Sekunden gelaufen währe.
[Bearbeiten] begin kann mehr
Um zeitliche Abläufe fest zu legen ist eine Zeitangabe schon recht nützlich, aber richtig interaktiv ist es nicht dafür gibt es die DOM-Events:
| Event | Funktion |
|---|---|
| click | wenn auf das Element geklickt wird startet die Aktion |
| mousedown | hier startet die Aktion schon wenn die Maustaste gedrückt wird ohne das sie losgelassen werden muss |
| mouseup | die Animation startet sobald die Maustaste losgelassen wird |
| mouseover | hier reicht es schon die Maus nur über ein Element zu bewegen um eine Aktion aus zu lösen |
| mouseout | Sobald der Mauszeiger aus dem Element ausbricht schlägt mouseout Alarm |
| accessKey | Wenn eine bestimmte Taste gedrückt wird startet die Aktion |
Anzuwenden ist es eigentlich sehr einfach: begin="mouseover" und so weiter. Eine kleine Ausnahme ist hier accessKey da wir hier noch einen Buchstaben mit auf den Weg geben wollen: begin="accessKey(a)" und die Aktion startet wenn man auf der Tastatur das A drückt.
Es können mehrere Auslöser angegeben werden diese werden mit einem Strichpunkt (;) getrennt.
begin="100s; mouseover"
diese Aktion wird in der hundertsten Sekunde ausgeführt wenn man nicht schon vorher den Mauszeiger über das Element positioniert.
[Bearbeiten] Ablauf und Timing
[Bearbeiten] Wallclock
[Bearbeiten] Beispiele
