9.3Zeiten setzen
Die einzelnen Animationselemente in SVG kennen eine Vielzahl an Attributen, die Zeitangaben aufnehmen können. Die folgende Tabelle beinhaltet die Namen dieser Attribute, eine kurze Beschreibung und die möglichen Werte bzw. Wertemengen. Dabei werden einige unbekannte Werte auftauchen, die aber im folgenden noch erklärt werden.
Attribut | Beschreibung | Werte |
---|---|---|
begin | Beginn der Animation | offset-value, syncbase-value, event-value, repeat-value, accessKey-value, wallclock-sync-value:wallclock() , indefinite |
dur | Dauer der Animation | clock-value, media , indefinite |
end | Ende der Animation | offset-value, syncbase-value, event-value, repeat-value, accessKey-value, wallclock-sync-value:wallclock() , indefinite |
restart | Verhalten der Animation bei Wiederholungen | always , whenNotActive , never |
repeatCount | Anzahl der Wiederholungen | Anzahl der Wiederholungen, indefinite |
repeatDur | Gesamtzeit der Animation inkl. Wiederholungen | clock-value, indefinite |
fill | Verhalten des animierten Objekts nach erfolgreichem Animationsdurchlauf (standardmäßig springt das Objekt zurück zur Ursprungsposition) | freeze , remove |
Tabelle 9-3: Zeitattribute
Nach dieser kleinen Übersicht folgt nun eine Liste der bislang noch unbekannten Werte.
-
offset-value
Hier muß ein negativer oder positiver Zeitwert eingegeben werden.
Bsp.:<animate begin="19s" ... />
-
syncbase-value
Hiermit wird eine Animation in Abhängigkeit einer anderen Animation ausgelöst oder beendet. Über eine Referenz werden diese miteinander verknüpft.
Bsp.:<animate begin="referenz.end-3s" ... />
-
event-value
Damit wird die Animation mittels eines Ereignisses beeinflußt. Dabei wird ein Ereignis ausgelöst, wenn...
focusin
- das Element den Fokus erhältfocusout
- das Element den Fokus verliertactivate
- das Element aktiviert wird (z.B. durch eine Tastatureingabe)click
- ein Klick auf die klickbare Fläche des Elements erfolgt (hier werden ebenfalls die Ereignissemousedown
undmouseup
ausgelöst)mousedown
- eine Maustaste gedrückt wird, während sich der Mauszeiger zum Zeitpunkt des Klickens über dem Element befandmouseup
- die gedrückte Maustaste wieder losgelassen wird (wird immer in Verbindung mitmousedown
ausgelöst)mouseover
- sich der Mauszeiger über dem Element befindetmousemove
- der Mauszeiger über dem Element bewegt wirdmouseout
- der Mauszeiger das Element wieder verläßt
<animate begin="mouseout" ... />
-
repeat-value
Hiermit kann festgelegt werden nach wie vielen Wiederholungen die Animation starten oder enden soll.
Bsp.:<animate ... repeatCount="3" end="repeat(2)" />
-
accessKey-value
Hier wird die Animation erst gestartet oder beendet, wenn eine spezielle Taste gedrückt wird. Es ist zu beachten, daß nicht alle Tasten, wie etwa STRG oder ALT, unterstützt werden.
Bsp.:<animate begin="accessKey(B)" ... />
-
wallclock-sync-value:wallclock()
Durch diese Angabe läßt sich eine Animation zu einer bestimmten Uhrzeit starten bzw. beenden. Dabei kann eine einfache Zeitangabe, wie z.B.11:47
, oder eine komplette Weltzeitangabe (2004-03-17T22:35+01:00
) benutzt werden.
Bsp.:<animate begin="wallclock-sync-value:wallclock(07:30)" ... />
-
indefinite
Dies bedeutet, daß eine Animation zu einem unbestimmten Zeitpunkt startet oder endet. Bei den AttributenrepeatCount
oderrepeatDur
bedeutetindefinite
auch unendliche Wiederholungen bis die Animation etwa durch ein Skript beendet wird. Wirdindefinite
in dasbegin
-Attribut geschrieben, so läßt sich die Animation nur durch einen Hyperlink oder mit Hilfe eines Skripts und dem AufrufbeginElement()
starten. Ähnlich verhält es sich beimend
-Attribut, hier kann die Animation nur durch den AufrufendElement()
gestoppt werden. Tritt der Wertindefinite
imdur
-Attribut auf, so wird keine Interpolation betrieben, sondern der Wert der zu animierenden Eigenschaft wird sofort gesetzt.
Bsp.:<animate id="referenz" begin="indefinite" ... />
-
clock-value
Dieser Wert steht für eine der Zeitangaben, die im KapitelZeiteinheiten aufgeführt wurden.
Bsp.:<animate ... dur="42s" />
-
media
media
sorgt dafür, daß die Animation genau so lange läuft wie ein zusätzlich eingebundenes Medium.
Bsp.:<animate ... dur="media" />
-
always
,whenNotActive
,never
Diese Werte tauchen nur im Attributrestart
auf und haben folgende Bedeutung:
always
- Die Animation läßt sich zu jedem Zeitpunkt immer wieder starten.whenNotActive
- Die Animation kann nur neu gestartet werden, wenn sie nicht läuft, d.h. sie läßt sich nicht unterbrechen.never
- Die Animation kann nach einem einzigen Durchlauf nicht wieder gestartet werden.
<animate ... restart="never" />
-
freeze
,remove
Diese beiden Werte können nur dem Attributfill
zugewiesen werden. Die Werte bedeuten dabei folgendes:
remove
- Nach Ablauf der Animation wird das animierte Objekt wieder an den ursprünglichen Ort zurückgesetzt.freeze
- Das Objekt verbleibt nach Ablauf der Animation in seiner neuen Position.
<animate ... fill="freeze" />