Animation entlang eines Bewegungspfades
<< < > >> > Hauptteil > Elemente > Animation > Pfad

Es gibt genau genommen, zwei Möglichkeiten, die Position eines Elementes über die Zeit zu verändern: mit <animateTransform> kann die Position direkt verändert werden, mit <animateMotion> wird das Element entlang eines Pfades bewegt. In den meisten Fällen ist es übersichtlicher und einfacher den zweiten Weg zu wählen, zudem kann man nur so runde Bewegungen erzeugen.

Hier wird erst mal das öfter benutzte <animateMotion> vorgestellt. Zuerst muss dieser Art der Animation ein Bewegungspfad zugeordnet werden, dafür gibt es zwei Methoden. Die erste benutzt das Element <mpath>, das mit xlink:href einen zuvor definierten Pfad (siehe Kapitel 2.5.4) referenziert. Das <mpath>-Element ist als Child von <animateMotion> zu platzieren, diesem also unterzuordnen. Die zweite Methode definiert den Pfad direkt im Animationselement im Attribut path von <animateMotion>, die Syntax entspricht einer Pfaddefinition im d Attribut (siehe Kapitel 2.5.4).

Zudem können weitere Animations-spezifischen Parameter in Form von Attributen festgelegt werden. Neben den üblichen Zeit-spezifischen Attributen gibt es die Möglichkeit, die Interpolation der Bewegung zu bestimmen. Das Attribut calcMode kann die Werte "discrete", "paced", linear" und "spline" besitzen. Hervorstechend ist der Wert "discrete", der bewirkt, dass keine flüssige Bewegung abläuft, sondern das Element nur an den Eckpunkten des Pfades platziert wird. Die anderen Werte sind einfach nur unterschiedliche Algorithmen zur Berechnung der Interpolation, der Unterschied ist eher gering, wie auch das Beispiel 37 zeigt. Dort werden die verschiedenen Interpolationsmöglichkeiten nebeneinander gezeigt, ganz unten im Beispiel sind alle übereinander platziert, um den Unterschied aufzuzeigen. Der default-Wert ist "paced". Übrigens kann dieses Attribut auch bei anderen Animationsarten als <animateMotion> eingesetzt werden.

In vielen Fällen ist es auch notwendig, das Element am Bewegungspfad auch auszurichten, dazu gibt es ebenfalls ein Attribut: rotate. Dieses erwartet entweder einen festen Winkel in Grad, d. h. auch hier wird das Element nicht am Pfad ausgerichtet, sondern behält die ganze Zeit fest jenen Winkel. Oder es erhält den Wert "auto" oder "auto-reverse". Bei "auto" wird das Element immer so rotiert, dass es senkrecht auf dem Pfad steht, bei "auto-reverse" werden noch einmal 180° hinzugefügt. Beispiel 38 zeigt den Effekt.

Spätestens hier mag der Wunsch aufkommen, die Schnelligkeit der Bewegung zu bestimmten Zeitpunkten zu beeinflussen. Hat man den calcMode auf "spline" gesetzt, kann man die Geschwindigkeitskurve über das Attribut keySplines verändern. Das folgende Bild zeigt den normalen Geschwindigkeitsablauf der Animation:

Die roten Punkte stellen die Kontrollpunkte der Kurve dar, sie liegen auf den Punkten (0,0) (links unten) und (1,1) (rechts oben), daraus entsteht eine lineare Geschwindigkeit. Die Werte für das Attribut keySpline sind die Koordinaten der zwei Kontrollpunkte in [0,1]², sie werden (wie unter dem Bild) mit Leerzeichen als Trennzeichen eingesetzt.
Bei dieser Verschiebung der Kontrollpunkte entsteht eine typische Geschwindigkeitskurve, die für Fahrten eingesetzt wird: aus dem Stand erfolgt eine langsame Beschleunigung, dann eine gleichmässige Fahrt und zuletzt wird abgebremst.

Diese Kurve verursacht ein sehr schnellen Start, der dann auch ohne gleichmässige Bewegungen im Mittelteil sofort in die Bremsphase übergeht.

Hier wird sehr langsam gestartet und dann relativ konstant die Geschwindigkeit bis zum Ende ohne Abbremsen gehalten.

Im Beispiel 39 wurde das Nachthimmel-Beispiel noch erweitert. Wenn der Himmel heller wird, wandert der Mond in einer Kurve nach rechts unten aus dem Bild. Die Bewegung startet sehr langsam und endet schnell.