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 warsztatach programistycznych Google.
Tło
Interfejs API udostępnia metodę Element.animate().
Zobaczmy przykład animacji koloru tła 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
Więcej informacji o interfejsie Web Animations API znajdziesz w rosnącej liczbie laboratoriów kodu. To samouczki, które pokazują różne zagadnienia związane z interfejsem API. W większości tych laboratoriów kodu będziesz ulepszać treści statyczne, dodając do nich efekty 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, nie musisz szukać dalej.
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ć odpowiednią obsługę we wszystkich nowoczesnych przeglądarkach, możesz użyć biblioteki polyfill. Interfejs Web Animations API ma dostępną już teraz implementację zastępczą, która umożliwia korzystanie z niego we wszystkich nowoczesnych przeglądarkach, w tym w Internet Explorerze, Firefoksie i Safari.
Jeśli masz ochotę na przygodę, możesz użyć polyfilla web-animations-next, który zawiera też funkcje, które nie zostały jeszcze sfinalizowane, takie jak kompozytowe konstruktory 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 ```
W każdym przypadku możesz po prostu umieścić polyfill w tagu skryptu przed dowolnym 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 świetnych postó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 Willigersa.