JavaScript/Animation

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.

Details: caniuse.com

Konstruktur

• Animation()

Methoden

• Animation.cancel()
• Animation.finish()
• Animation.pause()
• Animation.play()
• Animation.reverse()

Eigenschaften

• Animation.currentTime
• Animation.effect
• Animation.id
• Animation.finished
• Animation.playState
• Animation.playbackRate
• Animation.ready
• Animation.startTime
• Animation.timeline

Timing Options

• composite
• delay
• direction
• duration
• easing
• endDelay
• fill
• iterations
• iterationStart
• iterationComposite
• spacing

Vorüberlegungen

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

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

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.

effect

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

id

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

finished

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

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.

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.

ready

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

startTime

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

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.

Methoden

cancel

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

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.

pause

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

play

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

reverse

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

Anwendungsbeispiele

• JavaScript/Tutorials/Bildwechsler
  • Animieren in JavaScript
  • Animationen synchronisieren
  • Animationen steuern
  • Extras(Nachladen von CSS-Dateien)
• SVG/Anwendung und Praxis/SVG mit JavaScript animieren
• SVG/Anwendung und Praxis/Shape-Morphing

Polyfill

Auch wenn Internet Explorer und Safari die Web Animations API noch nicht unterstützen, ist eine Entwicklung mittelfristig geplant. . 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

Weblinks

• W3C: The Animation interface
• MDN: Animation
• MDN: Using the Web Animations API

Englisch:

• Daniel Wilson: Let’s talk about the Web Animations API 5-teilige Serie mit vielen interessanten Beispielen
  • Daniel Wilson: Web Animations API Tutorial Conclusion
  • Daniel Wilson: When to Use the Web Animations API (August 4, 2016)
• Alistapart: Web Animation Past, Present, and Future 22.03.2016
• webdesignerdepot: The ultimate guide to Web animation May. 25, 2015 (sehr guter Basis-Artikel)
• csstricks: CSS Animations vs Web Animations API Ollie Williams am 13.06.2017
• invisionsapp: 5 examples of web animation done right

• Self-Forum: css-animation-schneller-als-js-animation vom 13.05.2016

Demos:

• github: Web Animations Demos
• codepen: Growing/Shrinking Alice Game : Alice in Web Animations API Land von Rachel Nabors

Polyfill

• github.com: web-animations-js