In einer Visualisierung***b-0 können Visuelemente***1002 mit Hilfe von Animationen animiert werden.
Hinweis:
Hier werden nur die Keyframes einer Animation definiert. Weitere Eigenschaften (Dauer einer Animation, etc.) werden in den Design-Eigenschaften***1003 des entsprechenden Visuelements***1002 definiert.
Eigenschaften
Name: frei wählbarer Name der Animation
Keyframes: CSS-Keyframes zur Definition der Animation
jeder Keyframe definiert CSS-Eigenschaften des Visuelements zu einem Zeitpunkt der Animation (s.u.)
zwischen den einzelnen Keyframes erfolgt ein animierter Übergang, z.B. wird "weich" von einer Farbe zur nächsten übergeblendet
Wichtig: Variablen, Funktionen und Formeln***r-3 stehen für Animationen nicht(!) zu Verfügung.
Hinweis: Die maximale Gesamtlänge beträgt 10.000 Zeichen.
Geschwindigkeit: legt fest, mit welchem Geschwindigkeitsverlauf die Frames abgespielt werden
gleichförmig: die Animation wird linear abgespielt
schnell beschleunigen und verlangsamen: die Animation wird zunächst schnell beschleunigt abgespielt und anschließend abgebremst
gleichmäßig beschleunigen und verlangsamen: die Animation wird gleichmäßig beschleunigt abgespielt und anschließend gleichmäßig abgebremst
beschleunigen: die Animation wird gleichmäßig beschleunigt abgespielt
verlangsamen: die Animation wird gleichmäßig abgebremst
Verzögerung: optional kann der Start einer Animation um diesen Wert (in Sekunden) verzögert werden
die Angabe von "0" (oder keine Angabe) führt zu einem unmittelbaren Abspielen der Animation
Abspielrichtung: legt fest, ob die Animation vorwärts, rückwärts oder alternierend abgespielt wird
vorwärts: die Animation wird vorwärts abgespielt
rückwärts: die Animation wird rückwärts abgespielt
alternierend: die Animation wird zunächst vorwärts und anschließend rückwärts abgespielt (sofern die Anzahl der Zyklen mind. 2 beträgt)
rückwärts alternierend: die Animation wird zunächst rückwärts und anschließend vorwärts abgespielt (sofern die Anzahl der Zyklen mind. 2 beträgt)
Füllmodus: legt fest, mit welchem Keyframe die Animation startet oder endet bzw. welcher Keyframe während der Verzögerungszeit angewendet wird
das Verhalten ist von der Abspielrichtung und ggf. von der Verzögerungszeit abhängig
Details sind einer entsprechenden CSS-Dokumentation zu entnehmen ("fill-mode")
Vorschau
Mit den Schiebereglern wird die Dauer der Vorschau-Animation bzw. die Anzahl der Zyklen eingestellt. Die Schaltflächen starten bzw. stoppen die Vorschau-Animation.
Informationen zu Keyframes
Keyframes definieren grundsätzlich einen relativen Zeitpunkt (in Prozent der Gesamtdauer der Animation), sowie CSS-Eigenschaften, die zum definierten Zeitpunkt auf das Visuelement angewendet werden.
Prinzipiell ist ein Keyframe wie folgt aufgebaut (weiterführende Hinweise sind entsprechender Literatur zu entnehmen):
<Zeitpunkt> {<CSS-Eigenschaften>}
<Zeitpunkt>: relative Zeitangabe in Prozent, bezogen auf die Gesamtdauer der Animation (z.B. "50%")
<CSS-Eigenschaften>: CSS-Eigenschaften, getrennt durch ein Semikolon (z.B. "color:red; opacity:50%;")
In einer Visualisierung***b-0 können Visuelemente***1002 mit Hilfe von Animationen animiert werden. Die Zuweisung einer Animation zu einem Visuelement erfolgt mit Hilfe eines Designs***1003.