Das Web Animations API bietet leistungsstarke Primitive zur Beschreibung von imperativen Animationen aus JavaScript. Aber 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().
Schauen wir uns ein Beispiel an, bei dem
die Hintergrundfarbe von Rot zu Grün animiert,
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. Die Funktion ist auch nativ in Opera verfügbar und befindet sich in der aktiven Entwicklung für Firefox. Dies ist ein leistungsstarkes Primitive, das einen Platz in deiner Toolbox verdient.
Codelabs
Für die Web Animations API steht eine wachsende Anzahl von Codelabs zur Verfügung. In diesen Leitfäden zum selbstbestimmten Lernen werden verschiedene Konzepte in der API demonstriert. In den meisten dieser Codelabs verwenden Sie statische Inhalte und optimieren sie mit Animationseffekten.
Diese Codelabs und verwandte Links oder Ressourcen sind der beste Ausgangspunkt, wenn du mehr über die neuen Primitiven erfahren möchtest, die dir in Webanimationen zur Verfügung stehen. Sieh dir diesen Android-inspirierten Enthüllungseffekt an, um eine Vorstellung davon zu bekommen, was du entwickeln könntest –
Wenn Sie gerade erst anfangen, sind Sie hier richtig.
Demos
Wenn du dich inspirieren lassen möchtest, solltest du dir die vom Material inspirierten Demos zu Webanimationen ansehen, deren Quelltext auf GitHub gehostet wird. Diese zeigen eine Vielzahl erstaunlicher Effekte und Sie können den Quellcode jeder Demo inline ansehen.
Zu den Demos gehören eine farbenfrohe, sich drehende Galaxie, die drehende Erde oder sogar eine Vielzahl von Effekten für ein einfaches altes Element.
Polyfill
Um eine erstklassige 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, das in allen modernen Browsern verfügbar ist, einschließlich Internet Explorer, Firefox und Safari.
Wenn du experimentierfreudig bist, kannst du das Polyfill mit Webanimationen – nächstes Tool verwenden, das 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.
Sie haben mehrere Möglichkeiten, beide Polyfills in Ihrem Code zu verwenden.
Verwenden Sie ein CDN wie cdnjs, jsDelivr oder zielen Sie über rawgit.com auf einen bestimmten Release ab.
Über NPM oder Bower installieren
$ npm install web-animations-js $ bower install web-animations-js ```
In allen Fällen können Sie das Polyfill einfach 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 Ressourcen
Eine technische Einführung findest du in den W3C-Spezifikationen.
Dan Wilson hat außerdem tolle Beiträge zum Thema Webanimationen verfasst, unter anderem dazu, wie diese Funktion zusammen mit der neuen CSS-Property motion-path verwendet werden kann.
Einige Beispiele für die Verwendung von motion-path finden Sie im Dokument von Eric Willigers.