Die native Unterstützung für Webanimationen wurde in Chrome 36 eingeführt und in Chrome 39 um eine Wiedergabesteuerung erweitert. Mit der Methode Element.animate() können imperative Animationen direkt aus JavaScript ausgelöst werden. Das zurückgegebene Objekt kann dann verwendet werden, um die Wiedergabe dieser Animationen zu steuern. Diese Methoden werden im aktuellen Entwurf der W3C-Spezifikation für Webanimationen beschrieben.
Es gibt eine Polyfill-Version, die derzeit aktiv entwickelt wird und alle nativ implementierten Web-Animations-Funktionen unterstützt. Sie wird in allen modernen Browsern unterstützt. Diese Hauptmethoden sind sofort einsatzbereit und sollten Teil Ihres Werkzeugkastens für die Erstellung ansprechender Websites sein, die von Animationen profitieren, z. B. die Web-App der Google I/O 2015.
Änderungen an Konstruktor und Gruppen
Die Web Animations-Spezifikation beschreibt auch Gruppen und Sequenzen sowie Konstruktoren für Animationen und Player. Diese Funktionen waren in der web-animations-next-Polyfill verfügbar, die entwickelt wurde, um Funktionen zu präsentieren, die noch diskutiert werden und noch nicht nativ implementiert wurden. Aufgrund des Feedbacks von Entwicklern benennt das Team, das Web-Animationen entwickelt, diese Funktionen um, damit sie verständlicher sind.
Die FXTF hat sich vor Kurzem in Sydney, Australien, getroffen und die Benennung besprochen, da einige Entwickler berechtigte Bedenken hinsichtlich der Verwirrung durch die Namen geäußert hatten. Daher wurden die folgenden Namensänderungen vereinbart:
- Animation wird zu KeyframeEffect
- AnimationSequence wird zu SequenceEffect
- AnimationGroup wird zu GroupEffect
- AnimationPlayer wird zu Animation
Animationen und ihre Player sind zwar nativ in Chrome und als Teil der Polyfill verfügbar, werden aber derzeit direkt über die Element.animate()-Methode erstellt. An vorhandenem Code, der die Element.animate()-Methode verwendet, sind keine Änderungen erforderlich.
Die neuen Namen spiegeln das Verhalten der einzelnen Objekte genauer wider. KeyframeEffect beschreibt beispielsweise keyframebasierte Effekte, die auf HTML-Elemente ausgerichtet werden können. Das neue Animation-Objekt hingegen stellt eine Animation in einem der vielen Status dar, z. B. „Wiedergabe“ oder „Pausiert“.
SourceCodeEffect
Wenn Sie Teile der Entwurfsspezifikation über die polyfill „web-animations-next“ verwenden, müssen Sie Ihren Code innerhalb der Einstellungsfrist entsprechend aktualisieren. Gemäß der Richtlinie zu Änderungen an Polyfills unterstützen wir eine alte Version für drei Monate und geben Warnungen in der Console aus, wenn auf Ihrer Website eingestellte Funktionen oder Namen nicht mehr unterstützt werden.
Wenn Sie diese Funktionen ausprobieren möchten, warten Sie auf die Version 2 der Polyfill, um diese neuen Namen zu verwenden. Abonnieren Sie außerdem die Gruppe web-animations-changes, um über weitere Änderungen informiert zu werden.