Interfejs Web Animations API udostępnia zaawansowane elementy podstawowe do opisywania imperatywnych animacji w języku JavaScript. Co to jednak znaczy? Zapoznaj się z dostępnymi zasobami, w tym z prezentacjami i laboratoriami z programowania Google.
Wprowadzenie
Zasadniczo interfejs API udostępnia metodę Element.animate().
Zobaczmy przykład, który animuje kolor 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 z świetną opcją zastępczą polyfill (więcej informacji na ten temat później). Natywna obsługa tej metody i jej obiektu odtwarzacza stała się powszechnie dostępna w Chrome 39. Jest ona również natywnie dostępna w przeglądarce Opera i jest w trakcie aktywnego rozwoju dla przeglądarki Firefox. To potężny element podstawowy, który zasługuje na miejsce w Twojej skrzynce z narzędziami.
Codelabs
W przypadku interfejsu Web Animations API dostępnych jest coraz więcej ćwiczeń z programowania. Są to przewodniki do samodzielnego ukończenia, które pokazują różne pojęcia związane z interfejsem API. W większości tych ćwiczeń w Codelabs musisz uzupełnić zawartość statyczną i ulepszyć ją za pomocą efektów animacji.
Jeśli chcesz poznać nowe podstawowe elementy dostępne w animacjach internetowych, na początek zapoznaj się z tymi ćwiczeniami oraz powiązanymi linkami i materiałami. Aby dowiedzieć się, co możesz stworzyć, obejrzyj ten inspirowany Androidem efektem odkrywania:
Jeśli dopiero zaczynasz, nie czekaj!
Przykłady
Jeśli szukasz inspiracji, sprawdź inspirowane technologią Web Animation Demos, których źródło jest przechowywane na GitHubie. Zapewniają one szereg niesamowitych efektów, a kod źródłowy każdej z nich można wyświetlić w tekście.
Można w niej zobaczyć kolorową obracającą się galaktykę, obracającą się Ziemię, a nawet różne efekty przedstawiające zwykły stary element.
Watolina
Aby zapewnić doskonałe działanie we wszystkich nowoczesnych przeglądarkach, możesz użyć biblioteki polyfill. Interfejs Web Animations API jest wyposażony w 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 obu formatów polyfill znajdziesz na stronie głównej.
Masz kilka możliwości użycia kodu polyfill.
Użyj sieci CDN, np. cdnjs czy jsDelivr, lub ustaw kierowanie na konkretną wersję za pomocą rawgit.com
Zainstaluj 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 zapoznać się z wprowadzeniem bardziej technicznym, zapoznaj się ze specyfikacją W3C.
Dan Wilson napisał również znakomity zbiór postów na temat animacji internetowych, m.in. o tym, jak używać ich razem z nową usługą motion-path CSS.
Fragmenty wykorzystujące motion-path znajdziesz w dokumencie Erica Willigersa.