SMIL/animateMotion

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

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

Pfad-Animation mit path-Attribut ansehen …
<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 circle-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:

Referenzierung eines Animationspfads mit mpath ansehen …
	<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.

Beachten Sie, dass der Animationspfad relativ zum animierten Objekt liegt. Deshalb habe ich bewusst den Mittelpunkt des Kreises und den Beginn des Pfades auf 0,0 gelegt. Wenn der Kreis x- und y-Koordinaten hätte, würde er während der Animation entsprechend verschoben.
Beachten Sie: Falls mehrere Animationspfade angegeben werden, überschreibt ein ‘mpath’-Element das ‘path’-Attribut, das ‘values’ überschreibt, welches wiederum eine Angabe von ‘from’, ‘by’ und ‘to’ überschreibt.

Anwendungsbeispiele

Anstelle eines Balls soll nun ein Auto eine Straße entlangfahren:

Animation entlang eines vordefinierten Pfades ansehen …
	<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 der Eigenschaft rotate können Sie die Ausrichtung des animierten Objekts beeinflussen.

Folgende Angaben sind möglich:

  • auto: passt sich der Richtung/Steigung des Pfads an
  • auto-reverse passt sich der Richtung/Steigung des Pfads an; dreht Objekt aber um 180°
  • grad: Winkelmaß
Beachten Sie: Die Chrome-Browser Chrome, Edge und Opera verstehen zwar auto und auto-reverse, jedoch keine Gradangaben!
Ausrichtung an der Steigung des Pfads ansehen …
	<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.

Geschwindigkeitsregelung mit keypoints ansehen …
	<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.

Beachten Sie: Um keypoints einsetzen zu können , muss calcMode="linear" gesetzt worden sein.

Siehe auch

Beachten Sie: die Animation von Text entlang von Pfaden (Lauftext) ist mit einer Animation des startOffset-Attributs möglich. Dies können Sie entweder mit SMIL oder mit CSS-animations erreichen.

Weblinks


Abgerufen von „http://wiki.selfhtml.org/index.php?title=SMIL/animateMotion&oldid=91766“