3.2 SMIL 2 Animationsmodule
Neben dem modularen Aufbau sind die verschiedenen Animationsmodule die zweite
große Neuerung der Version 2 von SMIL. Sie finden sich in den "Basic Animation Modules",
dem "Time Manipulation Module" und im "Transition Effects Module".
In deklarativer Form können visuelle Inhalte wie Vektor- und Pixelgrafiken über
der Zeit modifiziert werden, wie es in der Browser-Welt von den "Flash"-Plugins der Firma
"Makromedia" bekannt ist.
Die SMIL 2 Animationsmodule unterscheiden sich aber vom "Flash"-Format entscheidend in folgenden
Punkten:
- Sie sind natürlich XML-konform, und damit textbasiert.
- Das Format ist standardisiert, steht also allen offen.
- Die Module sind kein abgeschlossenes Format, sonder bilden den offenen Teil eines Ganzen,
sind also bis ins Detail über das DOM erreichbar.
- SMIL ist ausschließ deklarativ.
Letzteres mag zunächst sicher eine Einschränkung sein, aber auch eine Herausforderung,
komplexe Vorgänge deklarativ zugänglich zu machen, wie zum Beispiel die Sprache
ANSI-SQL eindrucksvoll vorgemacht hat.
Im Folgenden sollen die Module "Basic Animation" und "Time Manipulation" anahnd einer
Arbeitsvorgabe für eine Animation vorgestellt werden.
3.2.1 Arbeitsvorgabe
Animiert werden soll ein Bild. Der Animation wird ein Rahmen in Form eines Pixelbereiches
gegeben, in der alle Darstellung erfolgt.
Es soll sich zu Beginn in der oberen linken Ecke des Animationsrahmens im Ruhezustand befinden.
Mit Beginn der Animation soll es sich mit konstanter Geschwinigkeit horizontal nach rechts
und mit konstanter Beschleunigung vertikal nach unten Bewegen. Beim erreichen eines Bildrandes
soll eine Geschwindigkeitsumkehr entsprechend eines frontalen elastischen Zusammenpralls mit einem
sehr viel schwereren Gegenstand stattfinden.
Das Verhalten entspricht damit in etwa dem eines von Boden und Wänden abprallenden
Balles. Nach dem horizontalen Aufprall bleibt die horizontale Geschwindigkeit mit umgekehrtem
Vorzeichen weiterhin konstant, nach dem vertikalen Aufprall kehrt sich die vertikale
Geschwindigkeit um, die Beschleunigung bleibt konstant und nach unten gerichtet:
Mit den folgenden Koordinaten für Bild und Position lässt sich die Bewegung
beschreiben:
Horizontal ist die Position mit s_x+ fü den Hin- und s_x- für den Rückweg
dann darstellbar als

beschreibbar, wobei s_x0,- die Anfangsposition des horzontalen Rückwegs ist.
Die vertikale Bewegung ist eigentlich durch eine einzige Gleichung beschreibbar. Die
Bewegung vom oberem Bildrand bis zum ersten Aufprall(s_y+) zeigt aber nochmehr die
Einfachheit. s_y- beschreibt die Bewegung ab dem ersten Aufprall. Bei jedem weiteren Aufprall
ist ein vollständiger Zyklus abgeschlossen, die Bewegung braucht dann an diesem Punkt nur
neu initialisiert werden (t=0).

3.2.2 Umsezung mit dem "BasicAnimation"-Modul
Das "BasicAnimation" Modul definiert die Elemente animate,set, animateMotion
und animateColor.
Das set-Element kann Attribute von Darstellungselementen für
einen Bestimmten Wert setzen. Theoretisch wäre die Vorgabe damit auch umsetzbar, praktisch macht
dies aber keinen Sinn, da für jeden Ort, den unser Bild einnehmen soll, jeweils zwei
set-Element benötigt würde.
Das animateColor-Element kann nur Farben beeinflussen, scheidet also auch aus. Seine Syntax
ist der des im Folgenden beschriebenen animate-Elements sehr ähnlich.
Das animate-Element spezifiziert mit dem Attribut targetElement das
Darstellungsobjekt, das animiert werden soll und attributeName bezeichnet das zu
beeinflussende Attribut.
Für die lineare Attributmanipulation stehen die animate-Attribute from,
to und by zur Verfügung. Es werden entweder der Anfangs- und der Endwert
des manipulierten Attributs durch from und to, oder Anfangswert und Differenz zwische
End- und Anfangswert mit from und by angegeben.
Die Zeitdauer der Animation wird mit den Gleichen Attributen wie bei den
Präsentationselementen angegeben.
Mit dieser einfachen Form der Animation ließe sich die horizontale Bewgung beschreiben:
<animate targetElement="bild"
attributeName="left"
begin="0s" dur="8s"
from="0" to="300px">
allerdings ohne die Bewegungsumkehr.
Eine weitere Möglichkeit wird mit dem values-Attribut gegeben. Der Wert dieses Attributs
ist eine Semikolon-getrennte Liste von Werten, die das gesteuerte Attribut während der Animationsdauer
in äquidistanten Zeitabständen einzunehmen hat. Die Zwischenwerte werden automatisch berechnet.
<animate targetElement="bild"
attributeName="left"
begin="0s" dur="16s"
repeatCount="indefinite"
values="0px;300px;0px">
Das Attribut repeatCount mit dm Wert "indefinite" bewirkt die Endlosausführung der Animation.
Auch die vertikale Bewegung kann so - approximiert - angegeben werden, wenn man sich nach der in 3.2.1
angegebenen Formal ein paar Zwischenwerte berechnet. Die Werte zwischen den einzelnen Punkten werden
allerdings immer noch linear bestimmt.
<animate targetElement="bild"
attributeName="top"
begin="0s" dur="8s"
repeatCount="indefinite"
values="0px;10px;40px;90px;160px;90px;40px;10px;0px">
Damit ist die Arbeitsvorgabe erfüllt.
3.2.3 Umsezung mit der Erweiterung "Time Manipulations Module"
Das "Time Manipulations Module" definiert zusätzliche Attribute für das
animate-Element. Diese sind accelerate, decelerate, autoReverse
und speed.
Das speed-Attribut definiert die relative Abspielgeschwindigkeit zu
Elternelementen, und ist damit für unsere Zwecke irrelevant.
Das autoreverse-Attribut kann zu "true" oder "false" gesetzt werden. Ist es
"true", wird jede zweite Wiederholung der Animation rückwärts abgespielt.
Dies kann schon bei der Animation der horizontalen Bewegung genutzt werden, die Bewegungsdefinition
erfolgt dann nur noch von links nach rechts:
<animate targetElement="bild"
attributeName="left"
begin="0s" dur="8s"
repeatCount="indefinite"
autoreverse="true"
values="0px;300px">
Die Attribute accelerate und decelerate bezeichnen mit einem Relativwert, wie lange
die Beschleunigungs- und die Verzögerungsfase einer Bewegung andauern sollen.
Dies erleichtert die Aufgabe der Darstellung der Vertikalbewegung erheblich. Setzt man
accelerate zu "1", wird bis zum Endwert beschleunigt, was der Definition fü s_y
entspricht. Wird zusätzlich autoreverse zu "true" gesetzt, ist die Arbeitsvorlage schon
erfüllt:
<animate targetElement="bild"
attributeName="left"
begin="0s" dur="4s"
repeatCount="indefinite"
autoreverse="true"
accelerate="1"
from="0px" to="160px">
|