SMIL/animateMotion
- 20min
- einfach
- Grundkenntnisse in
Um Objekte zu bewegen, können Sie deren Koordinatenwerte mit Hilfe von animate oder CSS-Animations verändern oder Sie können mittels animateTransform Verschiebungen animieren.
Das animateMotion-Element ermöglicht es, Objekte entlang eines vordefinierten Pfades laufen zu lassen.
Diese Pfad-Animationen waren lange ein Alleinstellungsmerkmal von SMIL. Um vergleichbare Animationen auch mit CSS realisieren zu können, führte Chrome die CSS-Eigenschaft motion-path ein, die mittlerweile unter dem Namen offset-path standardisiert ist.
Inhaltsverzeichnis
Einbindung
Der Animationspfad für das animateMotion-Element wird …
- entweder direkt im
path-Attribut notiert - oder als path-Objekt mit Hilfe des mpath-Elements referenziert.
path-Attribut
<circle id="ball">
<animateMotion
dur="3s" repeatCount="indefinite"
path="m 0,0 c -200,0 29.9,398.2 129.9,225 100,-173.2 -359.8,-173.2 -259.8,0 100,173.2 z"/>
</circle>
In diesem Beispiel enthält das eigentlich inhaltsleere circle-Element einen Start- und einen End-Tag. Dazwischne erhält es als Kind-Element ein animateMotion-Element mit einem path-Attribut. Dies enthält die aus dem path-Element bekannten Pfadkommandos.
Das circle-Element „fährt“ nun innerhalb von 3s diesen Pfad ab.
Der Pfad selbst ist nicht sichtbar und kann nicht durch andere Animationen wiederverwendet werden.
mpath
Alternativ können Sie den Animationspfad als path-Objekt notieren und mit Hilfe des mpath-Elements einmal oder mehrfach referenzieren:
<path id="route"
d="m 0,0 c -200,0 29.9,398.2 129.9,225 100,-173.2 -359.8,-173.2 -259.8,0 100,173.2z"
/>
<circle id="ball">
<animateMotion begin="ball.click" dur="3s" repeatCount="indefinite">
<mpath href="#route" />
</animateMotion>
</circle>
Das Beispiel zeigt einen rot gestrichelten Pfad und einen blauen Ball.
Innerhalb des circle-Elements befindet sich ein animateMotion-Element, das mit einem Klick eine Animation startet. Als Pfad für die Animation wird ein weiteres mpath-Kind-Element mit einer Referenz auf den Pfad angelegt.
In diesem Beispiel ist der Pfad sichtbar. Sie können ihn über seine Präsentationsattribute gestalten oder im Definitionsabschnitt ablegen, sodass er nicht gerendert wird.
Anwendungsbeispiele
Anstelle eines Balls soll nun ein Auto eine Straße entlangfahren:
<path id="route" d="M0,300 q100,-100 200,0 t200,0 t200,0 t200,0 t200,-50" />
<use href="#auto" x="-10" y="-25" fill="#dfac20">
<animateMotion
dur="4s"
repeatCount="3"
fill="freeze">
<mpath href="#route" />
</animateMotion>
</use>
Ein Pfad dient sowohl als Straße als auch als Vorlage für die Pfadanimation. Die Wellenlinie wird aus quadratischen Bézier-Kurven gebildet.
Das use-Element ruft das vorher in symbol definierte gelbe Auto auf, das nun mit animateMotion entlang des mit mpath-Elements aufgerufenen Pfades animiert wird.
Dabei wurde das Auto in den x- und y-Koordinaten etwas verschoben, damit es auf dem Pfad läuft. Leider sieht die Bewegung sehr künstlich aus, da das Fahrzeug unabhängig von der Steigung des Pfades immer die selbe Ausrichtung einnimmt.
rotate
Mit dem rotate-Attribut können Sie die Ausrichtung des animierten Objekts beeinflussen.
Folgende Angaben sind möglich:
auto: passt sich der Richtung/Steigung des Pfads anauto-reversepasst sich der Richtung/Steigung des Pfads an; dreht Objekt aber um 180°grad: Winkelmaß
auto und auto-reverse, jedoch keine Gradangaben! <use href="#auto" x="-10" y="-25" fill="#dfac20">
<animateMotion
dur="4s"
repeatCount="5"
rotate="auto"
fill="freeze">
<mpath href="#route" />
</animateMotion>
</use>
<use href="#auto" x="-10" y="-25" fill="var(green)">
<animateMotion
begin="2s"
dur="4s"
repeatCount="5"
rotate="auto-reverse"
fill="freeze">
<mpath href="#route" />
</animateMotion>
</use>
Mit der Eigenschaft rotate="auto" folgen die Autos nun auch den Steigungen.
Beachten Sie das grüne Auto! Mit rotate="auto-reverse" wird das Objekt um 180° gedreht.
keyPoints
Das keyPoints-Attribut ermöglicht es, für jeden der zugehörigen keyTimes-Werte Wegpunkte (keypoints) in einer durch Semikola separierten Liste (die Anzahl muss mit der der KeyTimes übereinstimmen) von Dezimalwerten innerhalb des Bereichs [0,1] festzulegen.
Der Browser berechnet daraus nun die Geschiwindigkeit, mit der sich das zu animierende Objekt entlang des Pfads bewegt.
<use href="#auto" x="-10" y="-25" fill="#dfac20">
<animateMotion
dur="4s"
repeatCount="5"
rotate="auto"
keyPoints="0; 0.17; 0.33; 0.5; 0.66; 0.83; 1"
keyTimes=" 0; 0.2; 0.3; 0.5; 0.6; 0.9; 1"
calcMode="linear"
fill="freeze">
<mpath href="#route" />
</animateMotion>
</use>
Unsere Animation erhält nun Wegpunkte (keypoints), deren Anzahl den keyTimes-Punkten entspricht. So kann die Bergauffahrt verzögert und die Downhill-Fahrt beschleunigt werden.
calcMode="linear" gesetzt worden sein.Siehe auch
Weblinks
- CSS-Tricks: Controlling the animation distance along the motion path with keyPoints (A Guide to SMIL Animation]
- content-animation.org: animateMotion
