Ressourcen zu Webanimationen

Die Web Animations API bietet leistungsstarke Primitive, um imperative Animationen aus JavaScript zu beschreiben. Aber was bedeutet das? Informieren Sie sich über die für Sie verfügbaren Ressourcen, einschließlich der Demos und Codelabs von Google.

Hintergrund

Im Kern stellt die API die Methode Element.animate() bereit. 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 von allen modernen Browsern unterstützt und verfügt über einen hervorragenden Polyfill-Fallback (mehr dazu später). Die native Unterstützung für diese Methode und das zugehörige Playerobjekt wurde im Rahmen von Chrome 39 allgemein verfügbar gemacht. Es ist auch nativ in Opera verfügbar und befindet sich in der aktiven Entwicklung für Firefox. Dies ist eine leistungsstarke Primitive, die einen Platz in Ihrer Toolbox verdient.

Codelabs

Für die Web Animations API ist eine wachsende Anzahl von Codelabs verfügbar. In diesen Leitfäden zum selbstbestimmten Lernen werden verschiedene API-Konzepte vorgestellt. In den meisten dieser Codelabs werden statische Inhalte mit Animationseffekten verbessert.

Diese Codelabs und die zugehörigen Links oder Ressourcen sind der beste Ausgangspunkt, wenn Sie die neuen Primitiven verstehen möchten, die Ihnen in Web Animations zur Verfügung stehen. Ein von Android inspirierter Enthüllungseffekt bietet

Vorschau des Codelab-Ergebnisses

Wenn Sie also gerade erst anfangen, dann sind Sie hier genau richtig!

Demos

Wenn Sie sich inspirieren lassen möchten, sehen Sie sich die von Material inspirierten Web Animations Demos an. Die Quelle wird auf GitHub gehostet. Diese zeigen eine Vielzahl erstaunlicher Effekte und Sie können den Quellcode jeder Demo inline anzeigen.

Dazu gehören eine farbige, sich drehende Galaxie, eine Drehung der Erde oder auch nur verschiedene Effekte auf ein einfaches altes Element.

Polyfill

Um eine optimale Unterstützung in allen modernen Browsern zu gewährleisten, können Sie eine Polyfill-Bibliothek verwenden. Für die Web Animations API ist derzeit ein Polyfill verfügbar, der sie in allen modernen Browsern, einschließlich Internet Explorer, Firefox und Safari, ermöglicht.

Wenn Sie experimentierfreudig sind, können Sie die Polyfill-Funktion "web-animations-next" verwenden, die auch Funktionen enthält, die noch nicht fertiggestellt wurden, z. B. die zusammensetzbaren GroupEffect- und SequenceEffect-Konstruktoren. Einen Vergleich der beiden Polyfills finden Sie auf der Startseite.

Es gibt mehrere Möglichkeiten, entweder Polyfill in deinem Code zu verwenden.

  1. Verwenden Sie ein CDN, z. B. cdnjs oder jsDelivr, oder nehmen Sie über rawgit.com eine Ausrichtung auf einen bestimmten Release vor.

  2. Über NPM oder Bower installieren

     $ npm install web-animations-js
     $ bower install web-animations-js
     ```
    

In allen Fällen können Sie den Polyfill-Code vor jedem anderen Code-Tag in ein Skript-Tag 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 Informationen

Eine technische Einführung findest du in den W3C-Spezifikationen.

Dan Wilson hat auch großartige Beiträge zu Webanimationen verfasst, in denen unter anderem erklärt wird, wie man es zusammen mit der neuen CSS-Property motion-path verwendet. Einige Beispiele mit motion-path finden Sie in der Dokumentation von Eric Williger.