animateMotion ermöglicht es, ein Element an einem Pfad entlang zu bewegen
(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)
Der Tag <animateMotion> ermöglicht die Bewegung eines Elements an einem definierten Pfad entlang. Er verfügt über folgende Attribute:
- path legt den Pfad fest, an dem das Element entlang bewegt werden soll. Dafür können die gleichen Befehle wie für das d-Attribut des <path>-Tags verwendet werden.
- keyPoints legt eine Liste von Fließkommazahlen zwischen 0 und 1 fest, die durch Semikola getrennt werden. Sie geben an, wie weit das Objekt vom Pfad entfernt bewegt wird. Dabei muss jeder Wert in keyPoints einem Wert in keyTimes entsprechen. Der Wert in keyTimes gibt den Zeitpunkt and, zu dem der Wert in keyPoints verwendet wird.
Hinweis:
keyPoints muss bei Verwendung im Tag <animateMotion> Wertepaare aus x- und y-Koordinaten enthalten. Dabei werden die Listen mit x1,y1;x2,y2;...;xn,yn gebildet. Die Koordinatenpaare werden also mit Semikola getrennt, die Werte innerhalb eines Paares mit Kommata. Auch die Attribute from, to und by müssen ein Wertepaar enthalten.
- rotate ermöglicht festzulegen, dass das Element nicht nur bewegt, sondern dabei auch gedreht wird. Dazu stehen die Werte auto, auto-reverse und ein numerischer Wert zur Verfügung, der dann die Drehung in ° angibt. Wählen Sie auto, wird das Element um den Winkel des Pfades gedreht. Bei auto-reverse werden zu der durch auto erzeugten Drehung 180° addiert.
- Die erste Animation im folgenden Listing verwendet das Attribut calcMode="discrete". Das bewirkt, dass das Quadrat, auf das die Animation angewendet wird, lediglich am Anfang und Ende der Animation eingeblendet wird, weil keine Zwischenbilder angezeigt werden.
- Die zweite Animation zeigt, wie Sie das rotate-Attribut einsetzen können, um das zu animierende Element zu drehen. Durch die Angabe von rotate="45" wird das Quadrat um 45° gedreht, wenn die Animation beginnt.
- Durch Angabe der Attribute repeatCount="10" und repeatDur="12s" wird hier bestimmt, dass die Animation zehnmal wiederholt werden soll, aber maximal zwölf Sekunden dauern soll.
<defs>
<animateMotion xlink:href="#Quadr1" dur="3s" path="M0 0 l+200 +200" fill="freeze" calcMode="discrete"/>
<animateMotion xlink:href="#Quadr2" dur="6s" path="M0 0 l+200 +200" rotate="45"/>
<animateMotion xlink:href="#Quadr3" dur="3s" path="M0 0 l+200 +200" repeatCount="10" repeatDur="12s"/>
</defs>
<g>
<path id="Pfad" d="M0 0 l+200 +200" style="stroke:black;stroke-opacity:0.5;fill:none"/>
<rect id="Quadr1" x="0" y="0" width="10" height="10" style="fill:red;stroke:black;"/>
</g>
<g transform="translate(0 50)">
<path id="Pfad" d="M0 0 l+200 +200" style="stroke:black;stroke-opacity:0.5;fill:none"/>
<rect id="Quadr2" x="0" y="0" width="10" height="10" style="fill:red;stroke:black;"/>
</g>
<g transform="translate(0 100)">
<path id="Pfad" d="M0 0 l+200 +200" style="stroke:black;stroke-opacity:0.5;fill:none"/>
<rect id="Quadr3" x="0" y="0" width="10" height="10" style="fill:red;stroke:black;"/>
</g>
Abbildung: Die Animationen zur Laufzeit.
Hinweis:
Animationen lassen sich in der Regel schlecht in Bildern darstellen. Daher ist es sinnvoll, Sie probieren die Animation selbst einmal aus.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de