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

Vorüberlegungen[Bearbeiten]

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.

Eigenschaften[Bearbeiten]

currentTime[Bearbeiten]

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.

effect[Bearbeiten]

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

id[Bearbeiten]

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

finished[Bearbeiten]

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

playState[Bearbeiten]

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.

playbackRate[Bearbeiten]

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.

ready[Bearbeiten]

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


startTime[Bearbeiten]

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

Timeline[Bearbeiten]

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.

Methoden[Bearbeiten]

cancel[Bearbeiten]

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

finish[Bearbeiten]

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.

pause[Bearbeiten]

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

play[Bearbeiten]

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

reverse[Bearbeiten]

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

Anwendungsbeispiele[Bearbeiten]

Polyfill[Bearbeiten]

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>

Quellen[Bearbeiten]

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

Weblinks[Bearbeiten]


englisch:



Demos:

Polyfill[Bearbeiten]