JavaScript/Animation

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Web Animations API liefert mit dem Animation-Objekt und Element.animate() einen Animation-Player, in dem CSS-Eigenschaften durch JavaScript animiert und gesteuert werden können.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Leer

Details: caniuse.com

Inhaltsverzeichnis

[Bearbeiten] Vorüberlegungen

Auch wenn es lange verpönt war Webseiten zu animieren, spielen Animationen im Webdesign doch eine große Rolle.[1]

Mit der Web Animations API können Sie Elemente direkt animieren, ohne mit DOM-Manipulationen das style-Attribut zu verändern oder nur für die Animation benötigte Klassen hinzuzufügen oder zu entfernen. Auch der Aufruf eigens für die Animation geschaffener Funktionen mit setTimeout oder requestAnimationFrame gehört nun bald der Vergangenheit an. Zwar wird die API noch nicht von allen Browsern unterstützt, es gibt aber einen Polyfill, den Sie bequem einbinden können.

[Bearbeiten] Eigenschaften

[Bearbeiten] currentTime

Die Eigenschaft Animation.currentTime gibt bei einer laufenden oder pausierenden Animation die aktuelle Zeit in Millisekunden zurück. Wenn die Animation noch keine timeline hat, da sie noch inaktiv ist, hat sie den Wert 0.

[Bearbeiten] effect

Die Eigenschaft Animation.effect liest oder ändert den AnimationEffectReadOnly der Animation. Meist handelt es sich um das KeyframeEffect-Interface.

[Bearbeiten] id

Die Eigenschaft Animation.id liest und setzt eine einzigartige id.

[Bearbeiten] finished

Die Eigenschaft Animation.finished gibt den Promise zurück, der nach dem erneuten Abspielen aufgelöst wird.

[Bearbeiten] playState

Die Eigenschaft Animation.playState setzt oder ändert den Abspiel-Status der Animation

Folgende Werte sind möglich:

  • idle: Die aktuelle Zeit ist unresolved und es gibt keine zu erledigenden Aufgaben
  • pending: Die Animation wartet auf die Erfüllung von Aufgaben um fortzusetzen
  • running: läuft, currentTime wird ständig aktualisiert und die playbackRate ist nicht 0
  • paused: Die Animation wurde unterbrochen und die Animation.currentTime-Eigenschaft wird nicht weiter aktualisiert.
  • finished: Die Animation hat das Ende erreicht und die Animation.currentTime-Eigenschaft wird nicht weiter aktualisiert.

[Bearbeiten] playbackRate

Die Eigenschaft Animation.playbackRate setzt oder ändert die Abspielrate der Animation.

Sie erwartet eine Zahlenangabe (Standardwert ist 1).

Ein negativer Wert sorgt dafür, dass die Animation rückwärts abgespielt wird.

Ein Wert von 0 lässt die Animation zum Stillstand kommen, der playState erhält aber nicht den Wert paused.

Durch eine Verdopplung der Abspielrate können Sie die Animation in der halben Zeit ablaufen lassen.

[Bearbeiten] ready

Die Eigenschaft Animation.ready (Readonly) gibt einen Promise zurück, wenn die Animation zum Abspielen bereit ist.


[Bearbeiten] startTime

Die Eigenschaft Animation.startTime setzt oder ändert den Zeitpunkt, an dem das Playback der Animation, bzw. der erste KeyframeEffect starten soll.

[Bearbeiten] Timeline

Die Eigenschaft Animation.timeline setzt oder ändert die timeline der Animation, die in der AnimationTimeline-API festelegt ist. In ihr werden Zeitwerte abgelegt, um sie zur Synchronisation mit anderen Animationen zu verwenden.

[Bearbeiten] Methoden

[Bearbeiten] cancel

Die Methode Animation.cancel() beendet alle KeyframeEffects der Animation und bricht den playback ab.

[Bearbeiten] finish

Die Methode Animation.finish() setzt die aktuelle Playbackzeit auf das Ende der Animation. Wenn die Animation in reverse() läuft, wird sie auf 0 (den Anfang) gesetzt.

[Bearbeiten] pause

Die Methode Animation.pause() unterbricht das Ablaufen der Animation.

[Bearbeiten] play

Die Methode Animation.play() beginnt eine Animation oder nimmt sie nach einer Pause wieder auf.

[Bearbeiten] reverse

Mit Animation.reverse() können Sie der playbackRate einen negativen Wert zuweisen, sodass die Animation rückwärts läuft.

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] Polyfill

Auch wenn Internet Explorer und Safari die Web Animations API noch nicht unterstützen, ist eine Entwicklung mittelfristig geplant. [2]. Da es einen Polyfill gibt, steht einem Einsatz aber auch heute schon nichts im Wege.

Beispiel: Polyfill
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>

[Bearbeiten] Quellen

  1. http://www.smashingmagazine.com/2014/11/18/the-state-of-animation-2014/
  2. Microsoft Edge Platform Status: Web Animations API

[Bearbeiten] Weblinks


englisch:



Demos:

[Bearbeiten] Polyfill

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML