| |
|
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 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:
animate,set,animateMotion,animateColor,animateTransform.
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:
Dazu klickt man bei gedrückter Ctrl-Taste mit der linken Maustaste auf den roten Zeitleistenschieber und verschiebt ihn in die richtige Anfangsposition.
Das Element sollte eine ID besitzen. Diese ID wird als Label für das Element angezeigt.
Dazu klickt man den oberen linken 
Button in der Zeitleistenansicht
an.
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.
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:
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.