Die Web Animations API bietet leistungsstarke Primitive zum Beschreiben imperativer Animationen aus JavaScript. Was bedeutet das? Informieren Sie sich über die verfügbaren Ressourcen, einschließlich der Demos und codelabs von Google.
Hintergrund
Im Kern bietet die API die Methode Element.animate().
Sehen wir uns ein Beispiel an, bei dem die Hintergrundfarbe von Rot zu Grün animiert wird:
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Diese Methode wird von allen modernen Browsern unterstützt, mit einem hervorragenden Polyfill-Fallback (mehr dazu später). In Chrome 39 wurden diese Methode und das zugehörige Player-Objekt nativ unterstützt. Außerdem ist es nativ in Opera verfügbar und wird für Firefox aktiv entwickelt. Dies ist ein leistungsstarkes Primitive, das einen Platz in Ihrer Toolbox verdient.
Codelabs
Es gibt immer mehr Codelabs für die Web Animations API. Diese Leitfäden können in Ihrem eigenen Tempo durchgearbeitet werden und zeigen verschiedene Konzepte in der API. In den meisten dieser Codelabs nehmen Sie statische Inhalte und ergänzen sie mit Animationseffekten.
Diese Codelabs und die zugehörigen Links oder Ressourcen sind der beste Ausgangspunkt, wenn Sie die neuen Primitives kennenlernen möchten, die Ihnen in Web-Animationen zur Verfügung stehen. Hier ist ein Beispiel für einen Android-inspirierten Reveal-Effekt:
Wenn du gerade erst anfängst, bist du hier genau richtig.
Demos
Wenn Sie nach Inspiration suchen, sehen Sie sich die Material-inspirierten Webanimationsdemos an. Der Quellcode wird auf GitHub gehostet. Sie zeigen eine Vielzahl von erstaunlichen Effekten und Sie können den Quellcode jeder Demo inline aufrufen.
Die Demos umfassen eine farbenfrohe rotierende Galaxie, eine rotierende Erde oder auch nur eine Vielzahl von Effekten auf einem einfachen Element.
Polyfill
Für eine gute Unterstützung in allen modernen Browsern können Sie eine Polyfill-Bibliothek verwenden. Für die Web Animations API ist derzeit eine Polyfill verfügbar, die sie für alle modernen Browser verfügbar macht, einschließlich Internet Explorer, Firefox und Safari.
Wenn Sie experimentierfreudig sind, können Sie die Polyfill-Funktion „Webanimations-Next“ verwenden, die auch Funktionen enthält, die noch nicht fertiggestellt sind, z. B. die zusammensetzbaren Konstruktoren GroupEffect und SequenceEffect.
Einen Vergleich der beiden polyfills finden Sie auf der Startseite.
Es gibt mehrere Möglichkeiten, eine polyfill in Ihrem Code zu verwenden.
Verwenden Sie ein CDN wie cdnjs oder jsDelivr oder richten Sie die Bereitstellung auf eine bestimmte Version über rawgit.com aus.
Über NPM oder Bower installieren
$ npm install web-animations-js $ bower install web-animations-js ```
In jedem Fall können Sie die polyfill einfach in einem Script-Tag vor anderen Code-
<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 ausführlichere technische Einführung finden Sie in der W3C-Spezifikation.
Dan Wilson hat auch eine Reihe von Artikeln zu Web-Animationen geschrieben, darunter auch zur Verwendung zusammen mit der neuen CSS-Eigenschaft motion-path.
Einige Beispiele für motion-path finden Sie im Dokument von Eric Willigers.