Interfejs Web Animations API udostępnia zaawansowane elementy do opisywania animacji imperatywnych w JavaScript – ale co to oznacza? Poznaj dostępne zasoby, w tym wersje demonstracyjne i warsztaty Google.
Tło
Interfejs API udostępnia przede wszystkim metodę Element.animate().
Zobaczmy przykład, w którym kolor tła zmienia się z czerwonego na zielony:
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Ta metoda jest obsługiwana we wszystkich nowoczesnych przeglądarkach i ma świetny mechanizm rezerwowy (więcej informacji znajdziesz poniżej). Natywna obsługa tej metody i jej obiektu odtwarzacza stała się powszechnie dostępna w Chrome 39. Jest ona dostępna natywnie w Operze, a w przypadku Firefoksa trwają aktywne prace nad jej wdrożeniem. To potężne narzędzie, które warto mieć w swoim arsenale.
Codelabs
Dostępnych jest coraz więcej ćwiczeń dotyczących interfejsu Web Animations API. Są to przewodniki, które możesz przeglądać we własnym tempie i które przedstawiają różne koncepcje związane z interfejsem API. W większości tych materiałów do nauki przekształcisz statyczne treści w animowane.
Te codelaby oraz powiązane z nimi linki i zasoby to najlepsze miejsce, aby zacząć poznawać nowe elementy dostępne w animacjach internetowych. Aby zobaczyć, co możesz stworzyć, zapoznaj się z tym efektem odkrywania inspirowanym Androidem:
Jeśli dopiero zaczynasz, nie musisz szukać dalej.
Prezentacje
Jeśli szukasz inspiracji, koniecznie zapoznaj się z demonstracjami animacji internetowych inspirowanymi Material Design, których kod źródłowy jest hostowany na GitHubie. Prezentują one różne niesamowite efekty, a kod źródłowy każdej wersji demonstracyjnej możesz wyświetlić w trybie inline.
Wersje demonstracyjne obejmują kolorową wirującą galaktykę, obracającą się Ziemię, a nawet różne efekty na zwykłym elemencie.
Polyfill
Aby zapewnić doskonałą obsługę we wszystkich nowoczesnych przeglądarkach, możesz użyć biblioteki polyfill. Interfejs Web Animations API ma obecnie dostępny polyfill, który umożliwia korzystanie z niego we wszystkich nowoczesnych przeglądarkach, w tym w Internet Explorerze, Firefoksie i Safari.
Jeśli masz ochotę na eksperymenty, możesz użyć polyfill web-animations-next, który zawiera też funkcje, które nie zostały jeszcze sfinalizowane, takie jak konstruktory GroupEffect i SequenceEffect.
Porównanie tych 2 wypełnień znajdziesz na stronie głównej.
Aby użyć w kodzie dowolnego kodu polyfill, masz kilka możliwości.
Użyj sieci CDN, np. cdnjs, jsDelivr, lub wybierz konkretną wersję za pomocą rawgit.com.
Instalowanie za pomocą NPM lub Bower
$ npm install web-animations-js $ bower install web-animations-js ```
We wszystkich przypadkach możesz po prostu umieścić polyfill w tagu skryptu przed jakimkolwiek innym kodem.
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
Inne zasoby
Bardziej szczegółowe wprowadzenie znajdziesz w specyfikacji W3C.
Dan Wilson napisał też świetny zestaw postów na temat animacji internetowych, w tym o tym, jak używać ich w połączeniu z nową właściwością CSS motion-path.
Przykłady użycia motion-path znajdziesz w dokumencie Erica Willigersa.