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

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

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

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

CSS

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

.animate {
    animation-name: move-and-change-color;   
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes move-and-change-color {
    0% {
        transform: translateX(0);
    }

    80% {
        transform: translateX(100px);
        background-color: #2196F3;
    }

    100% {
        transform: translateX(100px);
        background-color: #EF5350;
    }
}

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

var square = document.getElementById('square');

square.addEventListener('click', function() {
    square.className += " animate";
});

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

JavaScript

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

var moveAndChangeColor = [
    { 
        transform: 'translateX(0)',
        background: '#2196F3'
    },
    { 
        offset: 0.8,
        transform: 'translateX(100px)', 
        background: '#2196F3'
    },
    {
        transform: 'translateX(100px)',
        background: '#EF5350'
    }
];

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

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

var circle = document.getElementById('circle');

circle.addEventListener('click', function() {
    circle.animate(moveAndChangeColor, {
        duration: 400,
        fill: 'forwards'
    });
});

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

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

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

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

var animation = elem.animate(transitions, options);

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

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

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

https://codepen.io/ponj/pen/EXrNOg

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

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

https://codepen.io/ponj/pen/NgobeJ

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

spinnerAnimation.addEventListener('finish', function() {
    doSomething();
});

spinnerAnimation.addEventListener('cancel', function() {
    doSomething();
});

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

Большинство методов 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 проблем, ухудшающих читабельность

https://codepen.io/ponj/pen/XgONxX