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.
Konstruktur
Animation()
Methoden
Eigenschaften
Timing Options
Inhaltsverzeichnis
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.
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.
window.setInterval(messageOutput, 100);
function messageOutput (){
document.querySelector('#playState').innerText = Animation.playState;
document.querySelector('#currentTime').innerText = Animation.currentTime;
}
Das Beispiel zeigt eine Animation, die mit einem Klick auf Buttons gestartet, pausiert und beendet werden kann.
Anschließend werden playState und currentTime ausgegeben.
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.
window.setInterval(messageOutput, 100);
function messageOutput (){
document.querySelector('#playState').innerText = Animation.playState;
document.querySelector('#currentTime').innerText = Animation.currentTime;
}
Das Beispiel zeigt eine Animation, die mit einem Klick auf Buttons gestartet, pausiert und beendet werden kann.
Anschließend werden playState und currentTime ausgegeben.
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.
<input id="rate" type="range" min="-4" max="4" value="0" />
document.querySelector('#rate').addEventListener('change', changeSpeed);
function changeSpeed () {
Animation.playbackRate = document.querySelector('#rate').value;
}
Anfangs läuft die Animation normal ab. Bei einer Veränderung des Schiebers wird der aktuelle Wert der playbackRate der Animation zugewiesen:
- Bei einem positiven Wert wird die Animation in der „normalen“ Richtung abgespielt.
- Bei einem Wert von 0 wird die Animation angehalten
- Bei einem negativen Wert läuft die Animation rückwärts
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.
Anwendungsbeispiele
- JavaScript/Tutorials/Web Animations
- Animieren in JavaScript
- Animationen synchronisieren
- Animationen steuern
- Extras(Nachladen von CSS-Dateien)
- SVG und JavaScript
- Animation mit der WAAPI
- SVG/Tutorials/Shape-Morphing
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)
- smashingmagazine: Precise Timing With Web Animations API von Kirill Myshkin, 20.06.2022
- 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
