Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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
  • Edge
  • Firefox
  • Opera
  • Leer

Details: caniuse.com

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:

Objektschreibweise
element.animate({
  transform: ["translate(  0px)", "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:

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



Anwendungsbeispiel[Bearbeiten]

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]