Ijs2019medienpartner.jpg

SELFHTML ist in diesem Jahr Medienpartner der IJC.

Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

JavaScript/Animation/Timing Options

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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:

Eigenschaften[Bearbeiten]

composite[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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

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

duration[Bearbeiten]

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[Bearbeiten]

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))
z.B. cubic-bezier(0.42, 0, 0.58, 1)
Beachten Sie: Die easing-Eigenschaft entspricht der CSS-Eigenschaft animation-timing-function, hat im Unterschied zu dieser jedoch den Standardwert linear anstelle von ease.

fill[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

iterationComposite:

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

spacing[Bearbeiten]

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[Bearbeiten]