JavaScript/DOM/Element/animate

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Element
Wechseln zu: Navigation, Suche

Die element.animate() Methode ermöglicht es, mithilfe der Web Animations API Elemente mit JavaScript zu animieren. Dabei werden CSS-Eigenschaften eingebunden, deren Werte dann dynamisch verändert werden.

Syntax

element.animate(keyframes, options);


Folgende Parameter sind nötig:

Objektschreibweise

In dieser Variante enthält ein Objekt Schlüssel-Wert-Paare der zu animierenden CSS-Eigenschaft(en) und ihrer Werte:

Objektschreibweise
element.animate({
  transform: ["translate(  0px)", "translate(100px)", "translate(  0px)"],
  color: ["black", "red" , "black"]
}, (1000));

Array von Objekten

In dieser Variante wird ein Array von Objekten aus CSS-Eigenschaften und ihren Werten verwendet:

element.animate() - Array von Objekten
element.animate([
  {transform: 'translate(  0px)', color: 'black'},
  {transform: 'translate(100px)', color: 'red'},
  {transform: 'translate(  0px)', color: 'black'},
  ], {
    duration: 1000,               // Zeit in Ms,
    iterations: Infinity,         // Wiederholungen (hier unendlich)
    delay: 300                    // Verzögerung
});

Optionen

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))
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.

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.



Anwendungsbeispiel

element.animate() ansehen …
    var kreis = document.getElementById('kreis');
 
    kreis.onmouseover = function () {
 
        kreis.animate([{
            transform: 'translate(  0px)' + 'scale(1.0)',
	    background: '#dfac20'
        }, {
            transform: 'translate(100px)' + 'scale(1.5)',
	    background: 'red'
        }, {
            transform: 'translate(  0px)' + 'scale(1.0)',
	    background: 'black'
        }
 
        ], {
            duration: 1000,
            iterations: 10
 
        });
 
    };

In diesem Beispiel wird die Animation mit einem mouseover ausgelöst. Der Kreis wird in zwei CSS-Eigenschaften animiert. Einerseits wird er mit transform: translate() verschoben; zusätzlich wird der Hintergrund unterschiedlich gefärbt. Die Animation dauert eine Sekunde und wird 10mal wiederholt.

Siehe auch

Weblinks