Interfejs Web Animations API udostępnia potężne prymitywy do opisywania impersywnej animacji w JavaScriptzie. Co to oznacza? Dowiedz się więcej o dostępnych zasobach, w tym o demonstracjach i codelabs Google.
Tło
Interfejs API udostępnia 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, a w razie potrzeby można użyć polyfilla (więcej informacji na ten temat znajdziesz poniżej). Natywna obsługa tej metody i obiektu player stała się powszechnie dostępna w Chrome 39. Jest on dostępny w wersji natywnych aplikacji w przeglądarce Opera, a w przypadku przeglądarki Firefox jest aktywnie rozwijany. To potężny prymityw, który zasługuje na miejsce w Twoim zestawie narzędzi.
Codelabs
W przypadku interfejsu Web Animations API dostępnych jest coraz więcej ćwiczeń z programowania. To samouczki, które pokazują różne zagadnienia związane z interfejsem API. W większości tych laboratoriów kodu będziesz ulepszać statyczne treści za pomocą efektów animacji.
Te laboratoria kodu oraz powiązane linki i zasoby to najlepsze miejsce na rozpoczęcie nauki nowych prymitywów dostępnych w animacji internetowej. Aby dowiedzieć się, co możesz stworzyć, zapoznaj się z tym efektem wyświetlania inspirowanym Androidem:
Jeśli dopiero zaczynasz, to jest coś dla Ciebie.
Prezentacje
Jeśli szukasz inspiracji, zapoznaj się z demonstracjami animacji internetowych w stylu Material Design, których źródła znajdziesz na GitHubie. Prezentują one wiele niesamowitych efektów. Możesz wyświetlić kod źródłowy każdego z demo.
Demo zawiera kolorowo obracającą się galaktykę, obracającą się Ziemię lub nawet różne efekty na zwykłym elemencie.
Watolina
Aby zapewnić doskonałe działanie we wszystkich nowoczesnych przeglądarkach, możesz użyć biblioteki polyfill. Interfejs API Web Animations API ma kod polyfill, który jest dostępny we wszystkich nowoczesnych przeglądarkach, takich jak Internet Explorer, Firefox czy Safari.
Jeśli masz ochotę na przygodę, możesz użyć elementu polyfill na poziomie web-animations-next, który zawiera też funkcje, które nie zostały jeszcze sfinalizowane, takie jak konstruktory kompozycyjne GroupEffect i SequenceEffect.
Porównanie tych dwóch polyfill znajdziesz na stronie głównej.
Aby użyć polyfill w kodzie, masz kilka opcji.
Użyj CDN, np. cdnjs, jsDelivr lub skieruj na konkretny pakiet 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ć kod 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
Jeśli chcesz przeczytać bardziej techniczne wprowadzenie, zapoznaj się ze specyfikacją W3C.
Dan Wilson napisał też serie artykułów na temat animacji internetowych, w tym o tym, jak używać ich razem z nową właściwością CSS motion-path.
Przykłady użycia motion-path znajdziesz w artykule Erica Willigera.