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.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Leer

Details: caniuse.com

  • Firefox 4848

Syntax[Bearbeiten]

element.animate(keyframes, options);


Folgende Parameter sind nötig:

Objektschreibweise[Bearbeiten]

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

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

Array von Objekten[Bearbeiten]

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

Beispiel: 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[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.

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.



Anwendungsbeispiel[Bearbeiten]

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

Weblinks[Bearbeiten]