JavaScript/Animation/Timing Options

Die Methoden Element.animate() und KeyframeEffect.KeyframeEffect() können mit einem Timing-Objekt, das neben der Dauer (duration) weitere optionale Informationen beinhaltet, weiter verfeinert werden.

Syntax

Beispiel

var animationTiming = {
  duration: 1000,
  direction: 'alternate',
  delay: 2000,
  iterations: Infinity
}

folgende Angaben sind möglich:

• id: (optionale) Zeichenkette mit einer id
• composite: (optionale) Angabe, wie mit Werten aus anderen Animation zu verfahren ist
• delay: Verzögerung des Ausführungsbeginns
• direction: Richtung
• duration: Dauer
• easing: Beschleunigungskurven der Animation
• endDelay: Verzögerung am Ende der Animation
• fill: Ansicht nach Ablauf der Animation
• iterations: Anzahl der Wiederholungen
• iterationStart: Startpunkt der Ausführung
• iterationComposite:
• spacing: Verteilung der Keyframes

Eigenschaften

composite

Die composite-Eigenschaft ist eine optionale Angabe, wie mit Werten aus anderen Animation zu verfahren ist

• replace: Standardwert, bisherige Werte werden überschrieben
• add: Werte werden zusammengefasst und nacheinander ausgeführt

translate(100px) und rotate(50deg) → translate(100px) rotate(50deg)

• accumulate: Werte werden zusammengefasst

translate(100px) und translate(50px) → translate(150px), nicht translate(100px) translate(50px)

direction

Die direction-Eigenschaft gibt die Richtung des Animationsverlaufs an.

• 'normal': Standardwert
• 'reverse': rückwärts,
• 'alternate': ändert (wie ein Pendel) nach jeder Animation die Richtung,
• 'alternate-reverse': dito, nur umgekehrt

Beachten Sie: Die Werte sind Zeichenketten, müssen also in Anführungszeichen notiert werden!

delay

Die delay-Eigenschaft legt eine Verzögerung am Beginn der Animation fest. (Siehe auch die CSS-Eigenschaft animation-delay)

Sie erwartet eine Zeitangabe in ms (Standardwert = 0).

endDelay

Die endDelay-Eigenschaft legt eine Verzögerung am Ende der Animation fest.

Sie erwartet eine Zeitangabe in ms (Standardwert = 0).

duration

Die duration-Eigenschaft legt die Dauer der Animation in Millisekunden fest.

Beachten Sie: Anders als bei der CSS-Eigenschaft animation-duration sind keine Angaben in Sekunden erlaubt.

easing

Mit der easing-Eigenschaft können Sie Beschleunigungskurven der Animation definieren.

• linear: ( Standardwert) Übergang mit gleicher Geschwindigkeit vom Start bis zum Stop

(⇔ cubic-bezier(0,0,1,1))

• ease: Übergang mit langsamen Start, beschleunigt und endet langsam

(⇔ cubic-bezier(0.25,0.1,0.25,1))

• ease-in: Übergang mit einem langsamen Start

(⇔ cubic-bezier(0.42,0,1,1))

• ease-out: Übergang mit einem langsamen Ende

(⇔cubic-bezier(0,0,0.58,1))

• ease-in-out: Übergang mit einem langsamen Start und Ende

(⇔ cubic-bezier(0.42,0,0.58,1))

• Zahlenangabe: Zahlenangabe einer Bézier-Kurve

z.B. cubic-bezier(0.42, 0, 0.58, 1)

• steps(<integer>): lässt die Animation in mehreren Schritten springen; vgl. Ticken einer Uhr

Beachten Sie:

• Die easing-Eigenschaft entspricht der CSS-Eigenschaft animation-timing-function.
• Dort finden Sie auch ein Beispiel, was die Unterschiede zwischen den Beschleunigungsfunktionen verdeutlicht.
• Jedoch hat easing im Unterschied zur animation-timing-function den Standardwert linear anstelle von ease.

• MDN: EffectTiming.easing
• Daniel Wilson: Jumps: The New Steps() in Web Animation

fill

Die fill-Eigenschaft legt die Darstellung nach Ablauf der Animation fest.

• none: (Standardwert), Auswirkungen der Animation sind nur während des Ablaufs sichtbar, nicht jedoch nach Ablauf oder während einer Pause
• forwards: das Ergebnis der Animation soll nach deren Ablauf weiterhin angezeigt werden.
• backwards: animiertes Objekt springt auf den Ausgangspunkt zurück
• both: kombiniert die Auswirkungen von forwards und backwards und richtet sich nach dem aktuellen Zustand vor Beendigung der Animation

iterations

Die iterations-Eigenschaft legt die Anzahl der Wiederholungen fest.

• Zahlenangabe: Standardwert 0, d. h. Animation wird einmal ausgeführt
• Infinity: (Unendlichkeit), ununterbrochen fortlaufende Animation

Beachten Sie: Die Angabe von delay und endDelay wirkt nur zu Beginn und am Ende der Animation, nicht jedoch zwischen den Wiederholungen.

Beachten Sie: Abweichend von CSS-Animations, in der die Anzahl Wiederholungen mit der Eigenschaft animation-iteration-count und der Zeichenkette 'infinite' festgelget wird, verwendet die API die Eigenschaft iterations und das Schlüsselwort Infinity, dass ohne Anführungszeichen notiert wird.

iterationStart

Die iterationStart-Eigenschaft legt fest, an welcher Stelle und bei welchem Durchlauf die Animation startet.

Sie erwartet eine Zahlenangabe einer Dezimal- oder ganzen Zahl größer oder gleich 0 (Standardwert =0)

iterationsComposite

iterationComposite:

• replace: Standardwert, bisherige Werte werden überschrieben
• accumulate: Werte werden zusammengefasst

spacing

Mit der spacing-Eigenschaft können Sie festlegen, wie die einzelnen keyframes über die Dauer der Animation verteilt werden.

• distribute: Standardwert, keyframes werden gleichmäßig über Animationsdauer verteilt
• paced: keyframes werden anhand ihrer Werte so verteilt, dass größere Wertunterschiede die Keyframes weiter auseinanderziehen.

Weblinks

• W3C: 5.8. The AnimationEffectTimingProperties dictionary
• MDN: Animation timing options