Die Web Animations API bietet leistungsstarke Primitiven zum Beschreiben imperativer Animationen aus JavaScript. Aber was bedeutet das? Hier finden Sie Informationen zu den verfügbaren Ressourcen, darunter Demos und Codelabs von Google.
Hintergrund
Die API bietet im Wesentlichen die Methode Element.animate().
Sehen wir uns ein Beispiel an, in dem die Hintergrundfarbe von Rot zu Grün animiert wird:
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Diese Methode wird in allen modernen Browsern unterstützt und bietet einen guten Polyfill-Fallback (mehr dazu später). Die native Unterstützung für diese Methode und ihr Player-Objekt wurde mit Chrome 39 eingeführt. Sie ist auch nativ in Opera verfügbar und wird aktiv für Firefox entwickelt. Das ist ein leistungsstarkes Primitiv, das in Ihre Toolbox gehört.
Codelabs
Für die Web Animations API sind immer mehr Codelabs verfügbar. Dies sind Anleitungen zum Selbststudium, in denen verschiedene Konzepte der API veranschaulicht werden. In den meisten dieser Codelabs werden Sie statische Inhalte mit Animationseffekten optimieren.
Diese Codelabs und die zugehörigen Links oder Ressourcen sind der beste Ausgangspunkt, wenn Sie die neuen Primitiven kennenlernen möchten, die in Web Animations verfügbar sind. Hier finden Sie ein Beispiel für einen auf Android basierenden Enthüllungseffekt.
Wenn du gerade erst anfängst, bist du hier genau richtig.
Demos
Wenn Sie sich inspirieren lassen möchten, sollten Sie sich die Web Animations-Demos ansehen, die auf Material basieren. Der Quellcode ist auf GitHub verfügbar. Sie zeigen eine Vielzahl beeindruckender Effekte und der Quellcode jeder Demo kann inline angezeigt werden.
Die Demos umfassen eine bunte, sich drehende Galaxie, eine rotierende Erde oder auch nur eine Vielzahl von Effekten auf einem einfachen Element.
Polyfill
Damit alle modernen Browser optimal unterstützt werden, können Sie eine Polyfill-Bibliothek verwenden. Für die Web Animations API ist bereits ein Polyfill verfügbar, mit dem sie in allen modernen Browsern, einschließlich Internet Explorer, Firefox und Safari, verwendet werden kann.
Wenn Sie sich trauen, können Sie das web-animations-next-Polyfill verwenden, das auch Funktionen enthält, die noch nicht finalisiert sind, z. B. die zusammensetzbaren Konstruktoren GroupEffect und SequenceEffect.
Einen Vergleich der beiden Polyfills finden Sie auf der Startseite.
Es gibt mehrere Möglichkeiten, eines der beiden Polyfills in Ihrem Code zu verwenden.
Verwenden Sie ein CDN wie cdnjs, jsDelivr oder richten Sie sich über rawgit.com an eine bestimmte Version.
Installation mit NPM oder Bower
$ npm install web-animations-js $ bower install web-animations-js ```
In allen Fällen können Sie das Polyfill einfach in einem Script-Tag vor dem anderen Code einfügen.
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
Weitere Ressourcen
Eine technischere Einführung finden Sie in der W3C-Spezifikation.
Dan Wilson hat auch eine Reihe von Beiträgen zu Web Animations geschrieben, unter anderem dazu, wie sie zusammen mit dem neuen CSS-Attribut motion-path verwendet werden können.
Einige Beispiele für die Verwendung von motion-path finden Sie in diesem Dokument von Eric Willigers.