Die native Unterstützung für Web Animations wurde erstmals in Chrome 36 eingeführt und in Chrome 39 mit der Wiedergabesteuerung aktualisiert. Mit der Element.animate()-Methode können imperative Animationen direkt über JavaScript ausgelöst werden. Das zurückgegebene Objekt kann verwendet werden, um die Wiedergabe dieser Animationen zu steuern. Diese Methoden werden im aktuellen Entwurf der Web Animations W3C-Spezifikation ausführlich beschrieben.
Es gibt ein mitgeliefertes Polyfill, das sich in der aktiven Entwicklung befindet und alle nativ implementierten Web Animations-Funktionen nachverfolgt. Es wird in allen modernen Browsern unterstützt. Diese Kernmethoden sind sofort einsatzbereit und sollten Teil Ihres Toolkits für die Entwicklung von ansprechenden Anwendungen sein, die von Animationen profitieren (z. B. die Google I/O 2015-Web-App).
Änderungen an Konstruktoren und Gruppen
In der Web Animations-Spezifikation werden auch Gruppen und Sequenzen sowie Konstruktoren für Animationen und Player beschrieben. Sie waren im web-animations-next-Polyfill verfügbar, der entwickelt wurde, um Funktionen zu präsentieren, die noch diskutiert werden und noch nicht nativ implementiert sind. Aufgrund von Entwicklerfeedback benennt das Team, das Web Animations entwickelt, diese Funktionen um, damit sie selbsterklärender sind.
Die FXTF hat sich vor Kurzem in Sydney, Australien, getroffen und über die Namensgebung diskutiert. Eine Reihe von Entwicklern hatte gültige Einwände gegen einige der Namen vorgebracht, da sie verwirrend seien. 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 des Polyfills verfügbar, werden aber derzeit direkt über die Methode Element.animate() erstellt. Für vorhandenen Code, in dem die Element.animate()-Methode verwendet wird, sind keine Änderungen erforderlich.
Die neuen Namen spiegeln das Verhalten der einzelnen Objekte genauer wider. KeyframeEffect beschreibt beispielsweise Keyframe-basierte Effekte, die auf HTML-Elemente angewendet werden können. Das neue Animation-Objekt stellt dagegen eine Animation in einem von vielen Zuständen dar (z. B. „Wird wiedergegeben“, „Pausiert“ usw.).
SourceCodeEffect
Wenn Sie Teile des Draft-Standards über das Web-Animations-Next-Polyfill verwenden, müssen Sie Ihren Code innerhalb des Einstellungszeitraums aktualisieren, um diese neuen Namen zu berücksichtigen. Gemäß der Richtlinie zu Polyfill-Änderungen unterstützen wir eine alte Version drei Monate lang und geben Konsolenwarnungen aus, wenn auf Ihrer Website veraltete Funktionen oder Namen verwendet werden.
Wenn Sie diese Funktionen ausprobieren möchten, sollten Sie auf die Version 2 des Polyfills achten, um die neuen Namen nutzen zu können. Abonnieren Sie außerdem die Gruppe web-animations-changes, um über alle anderen Änderungen informiert zu werden.