Die native Unterstützung für Webanimationen wurde erstmals in Chrome 36 bereitgestellt und mit der Wiedergabesteuerung in Chrome 39 aktualisiert. Die Methode Element.animate() kann verwendet werden, um imperative Animationen direkt aus JavaScript auszulösen, und das zurückgegebene Objekt kann genutzt werden, um die Wiedergabe dieser Animationen zu steuern. Diese Methoden werden im aktuellen Entwurf der W3C-Spezifikation für Web Animationen ausführlich beschrieben.
Derzeit wird ein versendeter Polyfill entwickelt, der alle nativ implementierten Webanimations-Funktionen verfolgt und von allen modernen Browsern unterstützt wird. Diese grundlegenden Methoden sind sofort einsatzbereit und sollten Teil Ihrer Toolbox zum Erstellen ansprechender Inhalte, die von Animationen profitieren (z. B. für die Google I/O 2015-Web-App).
Änderungen an Konstruktor und Gruppen
In der Web Animations-Spezifikation werden auch Gruppen und Sequenzen sowie Konstruktoren für Animationen und Player beschrieben. Diese wurden im Polyfill-Element web-animations-next bereitgestellt, mit dem Funktionen präsentiert werden sollen, die derzeit noch diskutiert und noch nativ implementiert werden müssen. Als Reaktion auf Entwicklerfeedback hat das Team, das Web Animations entwickelt, diese Funktionen umbenannt, sodass sie selbsterklärender sind.
Das Unternehmen FXTF hat sich vor Kurzem in Sydney, Australien, getroffen und erörterte naming, da einige Entwickler legitime Punkte darüber gesprochen haben, dass einige der Benennungen verwirrend waren. Daher wurden die folgenden Namensänderungen vereinbart:
- Animation wird zu KeyframeEffect
- Aus AnimationSequence wird SequenceEffect.
- AnimationGroup wird zu GroupEffect.
- AnimationPlayer wird zu Animation
Animationen und die zugehörigen Player sind zwar nativ in Chrome und als Teil des Polyfill verfügbar, werden aber derzeit direkt über die Element.animate()-Methode erstellt. Vorhandener Code, der die Methode Element.animate() verwendet, erfordert keine Änderungen.
Die neuen Namen spiegeln das Verhalten der einzelnen Objekte genauer wider. Mit KeyframeEffect werden beispielsweise Keyframe-basierte Effekte beschrieben, die auf HTML-Elemente ausgerichtet werden können. Im Gegensatz dazu stellt das neue Animation-Objekt eine Animation in einem von vielen verschiedenen Status dar, z. B. „Wiedergabe“ oder „Pausiert“.
SourceCodeEffect
Wenn Sie Teile des Spezifikationsentwurfs über das Polyfill-Element "web-animations-next" verwenden, müssen Sie Ihren Code innerhalb des Einstellungszeitraums aktualisieren, damit die neuen Namen übernommen werden. Gemäß der Richtlinie zu Polyfill-Änderungen möchten wir eine alte Version drei Monate lang unterstützen und Warnhinweise für Konsolen bereitstellen, wenn auf Ihrer Website eingestellte Funktionen oder Namen verwendet werden.
Wenn du diese Funktionen ausprobieren möchtest, solltest du nach der Version 2 von Polyfill Ausschau halten, um diese neuen Namen nutzen zu können. Abonnieren Sie die Gruppe web-animations-changes, wenn Sie über weitere Änderungen informiert werden möchten.