JavaScript/DOM/Element/animate

Der Begriff animate ist mehrdeutig.
So gibt es das gleichlautende SVG- bzw. SMIL-Element: animate

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.

Browserunterstützung
caniuse.com

Syntax

element.animate(keyframes, options);

Folgende Parameter sind nötig:

• keyframes: enthält CSS-Eigenschaften und deren Werte in einer
  • Objektschreibweise
  • als Array von Objekten
• options: entweder eine Zeitangabe in Millisekunden oder ein Objekt, das Zeitangabe, Timing Options und weitere Optionen enthält
  • 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
  • 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

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

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

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

• JavaScript/Animation
• Einführung in Web Animations API
  • Animieren in JavaScript
  • Animationen synchronisieren
  • Animationen steuern

Weblinks

• W3C: 5.14. The Animatable interface
• MDN: Element.animate()
• birtles.github.io: Are we animated yet? – Übersicht über Firefox-Implementation der Web Animations API

• drweb: Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate()
• html5rocks: Simplified Concepts in Web Animations Naming (Umbenennungen der einzelnen Methoden!)
• html5rocks: Web Animations - element.animate() is now in Chrome 36