Interfejs Web Animations API udostępnia zaawansowane podstawowe funkcje do opisywania imperatywnych animacji w języku JavaScript. Ale co to znaczy? Dowiedz się więcej o dostępnych zasobach, w tym o prezentacjach i laboratoriach z programowania Google.
Wprowadzenie
Podstawą interfejsu API jest metoda Element.animate().
Przeanalizujmy przykład, w którym kolor tła animowany jest z czerwonego na zielony.
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Ta metoda jest obsługiwana przez wszystkie nowoczesne przeglądarki, z dużą opcją zastępczą polyfill (więcej o tym 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, a w trakcie pracy nad nią pracujemy nad przeglądarką Firefox. To zaawansowany element podstawowy, który zasługuje na miejsce w Twoim zestawie narzędzi.
Ćwiczenia z programowania
Dostępnych jest coraz więcej ćwiczeń z programowania dotyczących interfejsu Web Animations API. Są to przewodniki, które możesz rozwijać we własnym tempie, przedstawiając różne pojęcia związane z interfejsem API. W większości tych ćwiczeń z programowania użyjesz treści statycznych i ulepszysz je za pomocą efektów animacji.
Te ćwiczenia z programowania, a także powiązane linki i materiały są doskonałym punktem wyjścia, jeśli chcesz dowiedzieć się więcej o nowych podstawowych elementach dostępnych w animacji internetowych. Jeśli chcesz się dowiedzieć, co możesz skomponować, zobacz ten inspirowany Androidem efekt odkrywania,
Jeśli dopiero zaczynasz, nie szukaj dalej.
Przykłady
Jeśli szukasz inspiracji, zapoznaj się z materiałami demonstracyjnymi animacji internetowych inspirowanymi materiałami, które są dostępne na serwisie GitHub. Przedstawiają one różne niesamowite efekty i można zobaczyć w tekście kod źródłowy każdej wersji demonstracyjnej.
Przykłady obejmują kolorową wirującą galaktykę, obracającą się Ziemię, a nawet różne efekty na zwykłe pierwiastki.
Płyta poliestrowa
Aby zapewnić doskonałą obsługę we wszystkich nowoczesnych przeglądarkach, możesz użyć biblioteki polyfill. Interfejs Web Animations API jest obecnie dostępny w interfejsie polyfill, który działa we wszystkich nowoczesnych przeglądarkach, takich jak Internet Explorer, Firefox i Safari.
Jeśli masz ochotę na przygodę, możesz użyć funkcji web-animations-next polyfill, która obejmuje również funkcje, które nie zostały jeszcze ukończone, takie jak konstruktory GroupEffect i SequenceEffect.
Porównanie obu formatów polyfill znajdziesz na stronie głównej.
Jeśli chcesz użyć w kodzie kodu polyfill, masz kilka możliwości.
Użyj sieci CDN, takiej jak cdnjs czy jsDelivr, lub kieruj reklamy na konkretną wersję za pomocą rawgit.com.
Instalowanie przez 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 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 uzyskać bardziej techniczne wprowadzenie, zapoznaj się ze specyfikacją W3C.
Dan Wilson napisał też świetny zestaw postów na temat animacji internetowych, w którym wyjaśnia, jak korzystać z tej funkcji razem z nową właściwością CSS motion-path.
Niektóre przykłady z wykorzystaniem motion-path znajdziesz w dokumencie Erica Willigersa.