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
Die API bietet im Wesentlichen 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 in allen modernen Browsern unterstützt und hat einen hervorragenden Fallback für Polyfills (mehr dazu später). Die native Unterstützung für diese Methode und das zugehörige Player-Objekt wurde mit Chrome 39 allgemein verfügbar. 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. In diesen Leitfäden, die Sie in Ihrem eigenen Tempo durcharbeiten können, werden verschiedene Konzepte der API veranschaulicht. 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 mit dem Programmieren beginnst, 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 beeindruckenden 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 mutig sind, können Sie die Web-Animations-Next-Polyfill verwenden, die auch noch nicht fertiggestellte Funktionen enthält, z. B. die kompositionsfähigen 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 ein 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.