Анимации на Javascript: знакомимся с JavaScript Web Animation API

1
14127
Добавить в избранное

В этой статье рассмотрим несколько примеров использования нового JavaScript Web Animation API для создания анимаций в интерфейсе сайта.

Создание анимаций

Чтобы показать насколько новое API лучше классического подхода анимации с помощью CSS, рассмотрим два простых примера с кодом для каждого подхода.

CSS

Наша css анимация определяется в code>@keyframes и представляет временную шкалу для всех переходов.

Нам нужно, чтобы анимация началась после взаимодействия с пользователем, так что понадобиться event listener на JS:

Хотя этот способ неплохо работает, он не интуитивен и способен работать только за счет взаимодействия с JavaScript.

JavaScript

Мы можем описать анимацию на JS, используя те же переходы, что и в CSS:

Каждый объект в массиве представляет состояние анимации. Состояния равномерно распределены по времени (3 состояния – 0%, 50%, 100%).

Когда мы определили состояния в массиве, мы можем вызвать их используя метод animate():

Как можно заметить, JS подход более лаконичен и организован, все состояния находятся в одном файле и вызываются методом animate().

Контроль анимации

Web Animation API также позволяет контролировать воспроизведение анимации несколькими способами.

Метод animate() возвращает объект Animation, который можно сохранить в переменной и обращаться к нему, когда понадобится.

Интерфейс объекта обеспечивает следующие методы:

pause() – остановит анимацию в текущем состоянии.
play() – начнет воспроизводить анимацию из текущего состояния или сначала, если она закончилась
reverse() – воспроизведет переходы в обратном порядке.
finish() – перейдет в конец анимации (или в начало, если воспроизведение идет в обратном порядке)
cancel() – остановит воспроизведение и вернет в начальное состояние.

Ниже небольшой пример с зацикленной анимацией. С помощью кнопок можно управлять ее воспроизведением.

Свойства и event listener’ы

Объект Animation также позволяет получить доступ к таким свойствам, как текущее время воспроизведения, скорость воспроизведения и некоторым другим. Хотя некоторые способы доступны только для чтения, другие можно использовать в качестве setter’ов и getter’ов.

В дополнение, Web Animation API позволяет получить доступ к двум важным обработчикам событий: когда анимация закончилась и когда была отменена.

Поддержка и быстродействие

Большинство методов Web Animation API свободно работают в Chrome, Firefox и Opera, работоспособность в остальных браузерах на данный момент можно проверить здесь. Также для браузеров с ограниченной поддержкой Web Animation API можно использовать библиотеку polyfill.

Что касается быстродействия, то тут не может быть разницы между анимацией CSS и Web Animation API, так как браузеры используют один и тот же движок для обоих подходов. Если пользоваться свойствами, которые не являются причиной перерисовки, такими как opacity и transform, анимация в браузере будет держаться на уровне 60fps.

Дополнительные материалы

Using the Web Animations API на MDN
Animatelo – доработанная Animate.css с использованием Web Animation API
Let’s talk about the Web Animations API – туториал по Web Animation API из 5 частей

Другие статьи по теме

Паттерны JavaScript: курс, который упростит разработку

Разбираем JavaScript код: 7 проблем, ухудшающих читабельность

Интересуетесь веб-разработкой?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Добавить комментарий