VorwortGrundlagenLayoutZeitBild, Text und Ton |
4. Bild, Text und Ton4.4. AnimationIn diesem Kapitel werden die Animationsmodule erläutert. Es gibt zwei Animationsmodule: Das Basisanimationsmodul und das Spline-Animationsmodul. Die Module enthalten Elemente und Attribute zur Integration von Animationen in eine Multimediapräsentation. Unter Animation versteht man landläufig Cartoons oder Trickfilme. Ein Programm, das Animationen unterstützt, unterstützt im Grunde das Zeichnen von Objekten und die Bewegung von Objekten. Da SMIL keine Sprache ist, mit Objekte erzeugt werden können, ist das Verständnis von Animation in SMIL darauf begrenz, Parameter bereits bestehender Objekte so zu verändern, dass Bewegung entsteht. Die Animationsmodule in SMIL haben also nichts mit Cartoons zu tun. Vielmehr geht es um das Thema Bewegung bzw. Veränderung. Welche Möglichkeiten die SMIL-Animationsmodule bieten, soll an folgenden Beispielen verdeutlicht werden:
4.4.1. Das Animationsmodell4.4.1.1. Die einfache AnimationsfunktionEine Animation ist in SMIL als eine zeitabhängige Funktion eines Zielelements definiert. Die einfache Animationsfunktion produziert einen Attributwert des Zielelements für jeden Zeitpunkt der Animation. Es wird unterschieden zwischen dem Basiswert und dem Präsentationswert. Der Basiswert ist der Attributwert, von dem die Animation aus startet; der Präsentationswert ist der Attributwert, der sich zu einem bestimmten Zeitpunkt t aus der Animationsfunktion ergibt. An dem nachfolgenden Beispiel wird das Prinzip der einfachen Animationsfunktion sichtbar: <rect ...> Die zehn Sekunden dauernde Animation produziert ein Rechteck, das zunächst schmal und hoch ist und dann breit und flach wird. In diesem Beispiel wird die einfache Animationsfunktion des width-Attributs durch from="10px" to="100px" und dur="10s" spezifiziert. Daraus ergibt sich die Funktion f(t)=(10+90*t/10)px. Darüberhinaus kann eine einfache Animationsfunktion auch ohne die Angabe eines from-Wertes definiert werden: <animate attributeName="top" to="10" dur="2.5s" /> Der Zielwert wird automatisch vom Ausgangswert her bestimmt. Die allgemeine Beschreibung der Funktion lautet hier f(t,u)=(u*(2,5s-t)/2,5s)+10*(t/2,5s). Zusammenfassend lässt sich sagen, dass eine einfache Animationsfunktion f(t) definiert ist für die Zeitwerte von 0<=t<=d, wobei d die einfache Dauer einer Präsentation ist; der Zeitwert 0 legt den Beginn der Animation fest. Der aktuelle Wert des Zielattributs a eines Animationslements zu einem bestimmten Zeitpunkt wird mit u gekennzeichnet. Mit f(t,u) wird eine Animationsfunktion beschrieben, bei der neben der Zeit t weiterer Parameter hinzukommen. 4.4.1.2. Die Animationseffektfunktion F(t,u)Neben der einfachen Animationsfunktion gibt es noch die Animationseffektfunktion F(t,u), die sich von der einfachen Animationsfunktion dadurch unterscheidet, dass hier nicht die einfache Präsentationsdauer d sondern die aktive Präsentationsdauer AD in die Funktion eingeht. In diesem Fall sind Wiederholungen oder Freeze-Angaben mitberücksichtigt. Die Animationseffektfunktion F(t,u) ist somit definiert für die Zeitwerte 0<=t<=AD. Bei Wiederholungen wird die Animation mehrfach durchgeführt. Allgemein wird die wiederholte Animationsfunktion mit fr(t)=f(REMAINDER(t,d)) definiert, wobei mit t>=0,d die einfache Dauer der Präsentation und REMAINDER(t,d) als (t-d*floor(t/d)) definiert ist. Folgendes Beispiel, in dem die 2,5 Sekunden dauernde Animation einmal wiederholt wird, verdeutlicht dies: <animate attributeName="top" from="0" to="10" dur="2.5s" repeatCount="2" /> Neben repeatCount kann auch das Attribut repeatDur verwenden werden. Beispiel: <animate attributeName="top" from="10" to="20" dur="10s" repeatDur="5s" /> Mit der Wiederholung von Animationen kann sich ein kumulativer Effekt verbinden. In diesem Fall spricht man von einer kumulativen Animation. Beispiel: <img ...> Die Animation wird 4 mal durchgespielt; es handelt sich um ein Bild. das 5 Sekunden lang in einem Bogen durch die Präsentationsfläche wandert. Nach der ersten Animation kehrt das Bild aber nicht zum Ausgangspunkt zurück sondern startet an dem Punkt, an dem es die Animation beendet hat. Es wandert also mit jeder Wiederholung der Animation ein Stück weiter über die Animationsfläche. Eine weiterer Effekt ist das Einfrieren von Animationen. Beispiel: <img top="3" ...> Bei einer Animation kehrt das animierte Element nach Ende der Animation an den Ausgangspunkt zurück. Mit fill=freeze wird das Element, z.B. ein Bild, an dem Punkt bleiben, an dem es am Ende der Animation angekommen ist. 4.4.1.3. Die additive AnimationZusätzlich zur einfachen, wiederholten Animation oder kumulativen Animation können mit der additiven Animation komplexe Kombinationen von Animationen entwickelt werden. Das erste, theoretische Beispiel zeigt das Prinzip der additiven Animation; ein Rechteck, das 20 Pixel breit ist, wird um weitere 10 Pixel gedehnt. Der Ausgangswert des animierten Attributwertes beträgt 20 Pixel; hinzu kommen dann die durch die Animation addierten 10 Pixel; am Ende der Animation beträgt die Breite des Rechtecks dann 30 Pixel: <rect width="20px" ...> Im folgenden Beispiel werden zwei Bewegungen kombiniert: <img ...> 4.4.2. Elemente und Attribute des Basic Animation ModulsDas Basic-Animation-Modul kennt vier Elemente:
4.4.2.1. Das <animate>-ElementDas <animate>-Element kann numerische Skalare als auch numerische Vektoren animieren. Das <animate>-Element ist ein leeres Element, d.h. es bezieht sich zunächst nicht auf ein bestimmtes Medienobjekt. Der Bezug zum Medienobjekt wird entweder über das Attribut targetElement oder über die Position im SMIL-Dokument als Teil der Medienobjektbeschreibung hergestellt. Die Attribute des <animate>-Element werden auch von den anderen Animationselementen benutzt. Aus diesem Grund werden die einzelnen Attribute an dieser Stelle ausführlich besprochen. Ihr Anwendung gilt für die anderen Animationselement entsprechend. 4.4.2.1.1. Die Spezifizierung des AnimationsobjektsIn SMIL wird das zu animierende Objekt target element genannt. Dieses Objekt, z.B. ein Rechteck oder ein Bild, wird mit den Attributen targetElement und attributeName näher spezifiziert. Beispiel: <region id="video" top="7" left="10" height="216" width="280" /> ................... <animate targetElement="Video" attributeName="top" from="50" to="100" dur="5s" /> Der Wert des Attributs targetElement ist entweder der Wert eines XML identifiers eines Elements innerhalb des SMIL-Dokumentes. Der Wert des Attributs attributeName ist eine Zeichenkette, die den Namen des Target-Attributs festlegt. Daneben gibt es noch das Attribut attributeType mit den Attributwerten css, auto oder xml. Mit attributeType wird festgelegt, nach welchen Konventionen die Zeichenkette spezifiziert wird. Der Attributwert auto ist der voreingestellte Wert. Diese Form des <animate>-Elements kann an jeder Stelle des SMIL-Dokuments stehen. In diesem Fall spricht man von einer expliziten Definition des Targetelements. Bei der impliziten Definition wird das <animate>-Element in den Medienobjektcontainer integriert. Beispiel: <region id="video" top="7" left="10" height="216" width="280" /> ................... 4.4.2.1.2. Die Spezifizierung der einfachen Animationsfunktion f(t)Die Animationsfunktion bestimmt den Wert eines attributs zu einer bestimmten Zeit. Der Zeitbereich, in dem die Animationsfunktion definiert ist, ist die einfache Dauer der Animation. Eine Animation wird mit zunächst einmal entweder mit einer Liste von Werten oder als eine from, to, by-Liste beschrieben. Beispiel: <animate attributeName="top" values="50;100" dur="5s" /> In dem oben stehen Beispiel wird die Animation mit Hilfe des Attributs value durch eine Liste von Werten beschrieben. Der Wert von top wird innerhalb von 5 Sekunden in Zehnerschritten von 50 auf 100 erhöht. Wird statt mit dem Attribut values mit den Attributen from, to und by gearbeitet, ergeben sich folgende Beispiele: <animate attributeName="top" from="50" to="100" dur="5s" /> Der optionale Attributwert from legt den Ausgangswert und der Attributwert to den Endwert der Animation fest. In diesem Fall beginnt die Animation bei 50 Pixeln und endet bei 100 Pixeln. <animate attributeName="top" from="50" by="50" dur="5s" /> In diesem Beispiel wird statt des to-Attributs das by-Attribut benutzt. Mit by wird der Wert festgelegt, um den der Ausgangswert erweitert oder vermindert werden soll. Wie aus dem obenstehenden Beispiel sichtbar wird, sollte entweder ein to-Wert oder ein by-Wert angegeben werden; werden beide Werte angegeben, wird lediglich der to-Wert ausgeführt und der by-Wert ignoriert. Zur näheren Bestimmung einer Animation gehört noch das Attribut calcMode. Das Attribut calcMode bestimmt mit seinen Attributwerten die Art der Interpolation:
Beispiel für eine lineare Interpolation: <animate attributeName="top" values="0; 50; 100" dur="5s" calcMode="linear" /> Beispiel für keine Interpolation: <animate attributeName="color" to="blue" dur="5s" calcMode="discrete" /> 4.4.2.1.2. Die Spezifizierung der Animationseffektfunktion F(t,u)Von einer Animationseffektfunktion spricht man immer dann, wenn die einfache Animationsfunktion
Im einzelnen besitzt die Animationseffektfunktion neben den bereits genannten Attributen die Attribute:
4.4.2.2. Das <set>-ElementDas <set>-Element dient dazu, einen bestimmten Attributwert für eine bestimmte Zeit als Konstante zu setzen. Die Wirkung von <set> endet mit dem Ende der Animation. Die Wirkungsweise von set soll an zwei Beispielen
demonstriert werden. Im ersten Beispiel wird für die Animation
der ursprüngliche Attributwert „stroke-width“
eines Rechtecks auf 5 Pixel gesetzt: Im zweiten Beispiel wird ein Textelement auf „highlight“ gesetzt, wenn die Maus über das Textelement fährt: <text
This will highlight
if you mouse over it ...> 4.4.2.3. Das <animateMotion>-ElementDas animateMotion-Element lässt ein Objekt einen bestimmten Pfad entlang wandern. Der Pfad kann auf mehrere Arten beschrieben werden:
Alle Pfadangaben sind als x,y-Koordinatenwerte zu verstehen. Die Syntax für die x,y-Koordinatenwerten lautet:
Für einen from-Wert ergibt sich zum Beispiel from=“(100,0)“, usw. Das folgende Beispiel soll die Arbeitsweise von <animateMotion> unter Benutzung des Pfadattributs verdeutlichen: <img
........> In diesem Beispiel wandert für jeweils 5 Sekunden ein Bild auf einem Halbkreis die x-Achse entlang. Diese Bewegung wird drei mal wiederholt. Durch die Akumulation beginnt das Bild jedesmal dort, wo es nach der jeweiligen Iteration zum Halten kam.
Quelle: SMIL 2.0, W3C, 2001. Im folgenden Beispiel werden zwei Bewegungen kombiniert: <img
........> In diesem Beispiel wird sowohl für die from/to-Werte als auch für die values-Werte die Koordinatenschreibweise benutzt. Als Voreinstellung verwendet das <animationMotion>-Element für das calcMode-Attribut den Wert paced. Dadurch ergibt sich entlang des definierten Pfades eine konstante Bewegung. Wird der Wert linear benutzt, kann die Bewegung mit unterschiedlicher Geschwindigkeit ablaufen. Ein weiteres Attribut des <animateMotion>-Elements ist das Attribut origin. Mit origin kann eine bestimmte Ausgangsposition für das Animationsobjekt gesetzt werden. 4.4.2.4. Das <animateColor>-ElementMit dem <animateColor>-Element kann die Farbe eines Objektes verändert werden. Die Farbangaben müssen Standardfarbangaben oder RGB-Farbwerten entsprechen. Beispiel: <animateColor targetElement="background" attributeName="backgroundColor" values="red;black" dur="10s" /> 4.4.3. Das Spline-Animation ModulDas Spline-Animation-Modul erweitert die Interpoltationsmöglichkeiten des Basic-Animation-Moduls. Während im Basic-Animation-Modul nur die Interpolationswerte discrete, linear und paced möglich sind, steht im Spline-Animation-Modul für das calcMode-Attribut auch der Wert spline zur Verfügung. In diesem Fall erfolgt die Interpolation zwischen den Werten der values-Liste nach einer kubischen Becier-Splinefunktion. Hierfür werden die zusätzlichen Attribute
benötigt. KeyTimes enthält eine Liste von durch Semikolon getrennte Zeitangaben, um die Geschwindigkeit der Animation zu steuern. KeySplines enthält die Angaben für die Splinefunktion. Beispiel: <animate calcMode="spline" attributeName="x" values="0;50;100" dur="10s" keyTimes="0; .8; 1" keySplines=".5 0 .5 1; 0 0 1 1" /> Das Beispiel beschreibt eine 10 Sekunden dauernde Animation eines Objekts von 0 auf 50 nach 100 Pixel. Durch die keyTimes-Angabe läuft die Animation nicht kontinuierlich ab; vielmehr werden die ersten 80% der Animationszeit (8 Sekunden) für die Animation von 0 auf 50 Pixel verwendet. Die restlichen 2 Sekunden verbleiben dann für die Animation von 50 auf 100 Pixel.Die keySplines-Angaben definieren die Kontrollpunkte für die beiden Teilanimationen. Dem ersten Teil, von 0 auf 50 Pixel sind die Kontrollpunkte 0.5, 0 und 0.5, 1 als Wertepaar zugeordnet; dem zweiten Teil der Animation die Kontrollpunkte 0,0 und 1,1. Die untenstehende Grafik verdeutlicht die Arbeitsweise der Splinefunktion mit unterschiedlichen Kontrollpunkten. Die Kontrollpunkte 0.5, 0 und 0.5, 1 ergeben:
Quelle: SMIL 2.0, W3C, 2001. Die Kontrollpunkte 0,0 und 1,1 ergeben:
Quelle: SMIL 2.0, W3C, 2001. Ein weiteres Beispiel zeigt, wie from/to-Wertelisten benutzt werden: <animate calcMode="spline" attributeName="s" from="10" to="20" dur="20s" keyTimes="0; 7" keySplines=".5 0 .5 1" /> In diesem Fall erfolgt die 10 Sekunden dauernde Animation von 10 auf 20 Pixel in 7 Sekunden; die Animationsbewegung folgt einer s-förmigen Splinefunktion. Die restlichen 3 Sekunden verbleibt die Animation in der Position, die nach 7 Sekunden erreicht sind. Das Spline-Animation-Modul benutzt die selben Elemente wie das Basis-Animation-Modul:
|
