Abschnitt 3

Animationen

0 von 6 Übungen erledigt

Drei Arten von Animationen

Im modernen Web ist fast alles irgendwie animiert, und das wollen wir hier auch erreichen. Animationen mit SVG können sehr komplex werden, aber man kann damit auch sehr schöne Dinge darstellen. Wir beschäftigen uns nur mit den Grundlagen. Man kann damit aber auch schon komplexe Animationen erstellen.

Bemerkung

Im gedruckten Skript kann von einer Animation nur ein starres Bild stehen. Auf dieser Seite laufen alle Animationen wirklich: Was Sie in den Vorschauen sehen, ist dieselbe SVG-Datei, die auch im Listing daneben steht — Ihr Browser spielt sie ab. Wenn eine Animation nur einmal läuft und schon fertig ist, wenn Sie hinschauen, laden Sie die Seite einfach neu.

Genauer schauen wir uns die folgenden drei Arten von SVG-Animationen an.

Verformung

Indem wir gewisse Werte kontinuierlich verändern, erhalten wir eine Animation. Dafür setzen wir ein <animate>-Tag ein.

Beispiel

Listing 1. Ellipse zerquetschen (squeeze.svg)

Die Ellipse wird endlos zusammengedrückt und wieder losgelassen.

Hinweis

Beachten Sie, dass wir hier das <ellipse>-Tag nicht selbstschliessend schreiben und darin das <animate>-Tag einsetzen.

Bewegung

Mit Hilfe des <animateMotion>-Tags lassen sich Objekte entlang eines Pfades bewegen.

Beispiel

Listing 2. Kreis entlang einer Linie fahren lassen (animate-motion.svg)

Der Kreis fährt in fünf Sekunden über die Linie und beginnt wieder von vorn.

Der Pfad, dem gefolgt werden soll, wird hier nicht direkt angegeben, sondern mit einem <mpath>-Tag über seine ID referenziert. Alternativ kann man ihn dem <animateMotion>-Tag auch direkt im Attribut path mitgeben.

Transformation

Das <animateTransform>-Tag animiert die Transformationen aus Abschnitt 2. Im Attribut type geben wir an, welche: translate, rotate oder scale.

Beispiel

Listing 3. Einen Kreis pulsieren lassen (animate-scale.svg)

Der Kreis liegt im Ursprung — darum streckt scale ihn von der Mitte aus.

Der Ablauf einer Animation

Allen drei Tags sind die Attribute gemeinsam, mit denen wir den Ablauf der Animation steuern:

attributeName: Welches Attribut verändert werden soll, zum Beispiel cx oder ry. Bei einer animierten Transformation ist es immer transform.
from und to: Der Wert am Anfang und derjenige am Ende der Animation.
values: Eine ganze Liste von Werten, mit Semikolon getrennt, die der Reihe nach durchlaufen werden. Damit können wir eine Animation auch wieder zum Anfang zurückführen, wie etwa values="50;20;50".
dur: Die Dauer eines Durchlaufs, zum Beispiel 2s für zwei Sekunden oder 500ms für eine halbe Sekunde.
begin: Wann die Animation startet. Standardmässig sofort, mit begin="1s" eine Sekunde später.
repeatCount: Wie oft die Animation läuft. Mit indefinite läuft sie endlos.
fill: Was nach dem letzten Durchlauf passiert. Mit freeze bleibt der Endwert stehen, mit remove (Standard) springt die Form in den Ausgangszustand zurück. Verwechseln Sie dieses fill nicht mit der Füllfarbe — hier steht es an einem <animate>-Tag und nicht an einer Form.

Beispiel

Listing 4. Eine Animation, die einmal läuft und stehen bleibt (animate-freeze.svg)

Der Punkt wartet eine Sekunde, fährt zwei Sekunden lang nach rechts und bleibt dort. Laden Sie die Seite neu, um die Animation nochmals zu sehen.

Bemerkung

Animationen lassen sich auch mit CSS erzeugen, und für Webseiten ist das oft der bequemere Weg. Der Vorteil der hier gezeigten Variante ist, dass die Animation in der Bilddatei selbst steckt: Die Datei animiert sich auch dann, wenn sie ganz ohne Webseite geöffnet wird.

Zum Nachschlagen

SVG-Animationen haben mehr Attribute, als wir hier zeigen können. Diese zwei Adressen genügen für alles, was in den Übungen vorkommt:

Übungen

Erstellen Sie einen animierten Smiley, der Ihnen mit einem Auge zuzwinkert.

Das Ziel — hier läuft die Animation schon.

Lösungsvorschlag

Lösungsvorschlag (smiley-animation.svg)

Lassen Sie einen Ball endlos zwischen einem Boden und einem oberen Punkt hin und her hüpfen.

Hinweis

Mit from und to allein springt der Ball am Ende zurück. Nutzen Sie stattdessen values.

Das Ziel — hier läuft die Animation schon.

Lösungsvorschlag

Lösungsvorschlag (bouncing-ball.svg)

Erstellen Sie einen Fortschrittsbalken, der sich in vier Sekunden einmal von leer bis voll füllt und dann voll bleibt.

Hinweis

Animieren Sie die Breite eines Rechtecks. Dass der Balken am Ende stehen bleibt, erreichen Sie mit einem geeigneten Attribut am <animate>-Tag.

Das Ziel. Diese Animation läuft nur einmal — laden Sie die Seite neu, um sie von vorn zu sehen.

Lösungsvorschlag

Lösungsvorschlag (progress-bar.svg)

Erstellen Sie eine Ladeanimation: einen Kreisbogen, der sich endlos um einen blassen Ring dreht.

Hinweis

Sie brauchen keinen Bogen zu berechnen. Ein Kreis mit einer passenden stroke-dasharray zeigt nur ein Stück seines Randes. Der Umfang eines Kreises mit Radius 35 ist 2π · 35 ≈ 220.

Das Ziel — hier läuft die Animation schon.

Lösungsvorschlag

Lösungsvorschlag (spinner.svg)

Lassen Sie den Text «Gymnasium Muttenz» entlang einer «Wellenkurve» hin und her animieren.

Hinweis

Nutzen Sie «text-anchor="middle"» und «rotate="auto"» jeweils an einer geeigneten Stelle. Was bewirken diese Optionen?

Das Ziel — hier läuft die Animation schon.

Lösungsvorschlag

Lösungsvorschlag (gym-wave.svg)

Erstellen Sie ein rotes Quadrat, welches rotiert.

Hinweis

Lesen Sie unter animateTransform (SelfHTML) etwas über das Tag <animateTransform>. Achten Sie darauf, wo der Drehpunkt Ihres Quadrates liegt.

Das Ziel — hier läuft die Animation schon.

Lösungsvorschlag

Lösungsvorschlag (square-rotate.svg)