# Grafik und SMIL-Animation

In SVG werden Animationen als Elemente innerhalb der Struktur, die die Organisation der Graphik beschreibt, dargestellt. Animationselemente erscheinen als Kinder der animierten Graphikelemente. Um das Fokussieren auf eine Animation zu ermöglichen, werden alle Animationselemente in einer Zeitleistenansicht anzeigt und entsprechend der animierten Graphikelemente zusammengruppiert.

## Die Zeitleistenansicht

Die Zeitleistenansicht zeigt Animationen an, die mit Grafikobjekten assoziiert sind. Jedes animirte Objekt des Dokumentes wird dort dargestellt, mit einer graphischen Darstellung seiner Animationselemente.

Die folgende Abbildung zeigt die drei animierten Objekte eines Dokumentes. Jedes Objekt wird auf der linken Seite der Ansicht durch ein Label mit weißem Hintergrund und einem Kasten neben dem Label dargestellt. Durch Anklicken des Labels wird das entsprechende Element in der formatierten Ansicht hervorgehoben und zeigt so den Kontext dieses Elements an. Wenn das Graphikelement ein einzelnes Animationselement hat (wie das Element Rectangle in der Abbildung), wird dieses Animationselement als farbiger Balken angezeigt. Wenn es mehrere Elemente gibt, wird die gesamte Animation durch einen einzelnen grauen Balken dargestellt (Circle, am unteren Rand der Abbildung), und mit dem '+' Button kann der Benutzer auf eine erweiterte Darstellung umschalten. Das Element MyText ist ein Beispiel einer solchen erweiterten Darstellung, in der jedes Animationselement durch einen farbigen Balken dargestellt wird. Mit dem Button '-' gelangt der Benutzer zurück zu der komprimierten Darstellung.

Die Position einer Animation auf der Zeitachse hängt von ihrem Start- und Endzeitpunkt ab, und die Farbe des Balkens gibt die Art der Animation wieder:

- gelb für `animate`,
- rot für `set`,
- grün für `animateMotion`,
- dunkelblau für `animateColor`,
- hellblau für `animateTransform`.

## Bearbeiten von Animationen

Die Zeitleistenansicht ist nützlich, um sich schnell einen Überblick über die Animationen aller Graphiken in einem Dokument zu verschaffen, aber sie erlaubt es auch, Animationen zu bearbeiten. Vorhandene Elemente können geändert werden. Die meisten Änderungen erfolgen direkt auf der Zeitleiste, wie das Verschieben eines Balkens oder das Ändern seiner Länge. Bei Änderungen dieser Art werden in anderen Ansichten die entsprechenden Attribute des Animationselements sofort aktualisiert (in diesem Beispiel die Attribute `begin` und `dur`).

Eine Bewegung für ein existierendes Grafikelement kann man wie folgt erzeugen:

- Festlegen der Startzeit der Animation:

  Dazu klickt man bei gedrückter Ctrl-Taste mit der linken Maustaste auf den roten Zeitleistenschieber und verschiebt ihn in die richtige Anfangsposition.

- Auswahl des gewünschten Elements in der formatierten Ansicht:

  Das Element sollte eine ID besitzen. Diese ID wird als Label für das Element angezeigt.

- Erzeugen eines neuen Animationselements in der Zeitleistenansicht:

  Dazu klickt man den oberen linken Button in der Zeitleistenansicht an.

- Markieren der Start- und Zielposition der Bewegung in der formatierten Ansicht:

  Dazu klickt man bei gedrückter Ctrl-Taste mit der linken Maustaste auf das angezeigte Icon in der formatierten Ansicht. Damit kann man die Schlüsselpositionen des animierten Elements im Kontext der anderen Graphikelemente steuern. Man zeichnet nun einfach den Pfad der Bewegung.

- Abschließend kann man in der Zeitleistenansicht den neuen Balken verschieben und/oder seine Größe ändern, um den Zeitablauf zu justieren.

Das Einstellen des Zeitablaufs ist in der Zeitleistenansicht bequemer, weil dort die Synchronisierung eines Elements mit den anderen animierten Elementen deutlicher sichtbar ist. Die anderen Ansichten bleiben aber weiterhin verfügbar, und manche Parameter können in der Strukturansicht durch Bearbeiten von Attributen eingestellt werden, sowie falls notwendig im Quelltext.

Eine Farbenänderung für ein existierendes Graphikelement kann man wie folgt erzeugen:

- zuerst das gewünschte Element in der Hauptansicht auswählen,
- dann den oberen linken Button anklicken.

Ein Balken, der eine Animation darstellt, kann genauso manipuliert werden wie ein Rechteck im Dokument. Für die Zeitleistenansicht gibt es allerdings ein paar Einschränkungen. Zum Beispiel können farbige Balken nur horizontal entlang der Zeitleiste bewegt werden, und ihre Höhe kann nicht einzeln geändert werden. Diese Einschränkungen ergeben sich aus der Semantik der timeline graphic language.