Перевод статьи Web Animations API Tutorial Part 3: Multiple Animations с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это третья часть из серии учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

После обсуждения AnimationPlayer и шкалы времени в Web Animations API давайте поговорим о проигрывании сразу нескольких анимаций.

Множественные анимации для одного элемента

В этом примере к каждому прямоугольнику применены три анимации (влияющие на трансформацию, прозрачность и цвет). Можно вызвать animate() для элемента несколько раз, подобно тому, как в CSS можно задать несколько анимаций сразу.

При помощи CSS:

#toAnimate {
  animation: pulse 1s, activate 3000ms, have-fun-with-it 2.5s;
}
@keyframes pulse { /* ... */ }
@keyframes activate { /* ... */ }
@keyframes have-fun-with-it { /* ... */ }

При помощи Web Animations API:

var animated = document.getElementById('toAnimate');
var pulseKeyframes, //defined the keyframes here.
    activateKeyframes,
    haveFunKeyframes;
var pulse = animated.animate(pulseKeyframes, 1000); //второй параметр в виде числа — валидная сокращённая запись для длительности анимации
var activate = animated.animate(activateKeyframes, 3000);
var haveFunWithIt = animated.animate(haveFunKeyframes, 2500);

В WAAPI это создаёт три объекта AnimationPlayer, каждый из которых можно поставить на паузу, проиграть, завершить, отменить, и каждым можно манипулировать через шкалу времени и скорость воспроизведения

Получить объекты AnimationPlayer, получить их все

Итак, ваша анимация запущена и проигрывается, но вы не сохранили ссылку на AnimationPlayer при вызове animate()для элемента. Что же нам делать?

See the Pen Pause All those Random Dots! by Максим (@psywalker) on CodePen.

WAAPI создаёт шкалу времени по умолчанию, доступную просто как свойство документа: document.timeline. В настоящий момент это поддерживается в Firefox Nightly, равно как и в полифилле. Тут вообще много чего есть, но пока мы сосредоточимся на на его одном важном методе.

var players = document.timeline.getAnimations();
//возвращается массив всех активных (не завершённых и не отмененных) анимаций

В примере на CodePen видно несколько точек, бесконечно двигающихся со случайными скоростями, задержками и трансформациями. Кнопка «Поставить всё на паузу» вызывает метод getAnimations() и перебирает все объекты AnimationPlayer, которые он вернул (по одному для каждой анимации), и ставит на паузу каждый из них.

Попробуйте отредактировать CodePen, поменяв iterations с Infinity на 1, а затем дайте анимации завершиться и нажмите кнопку паузы. Вы увидите, что getAnimations() ничего не возвращает. Это из-за того, что анимации завершились, а этот метод возвращает только те анимации, которые запущены или поставлены на паузу.

В следующей серии…

В следующей части мы рассмотрим другие способы создания анимации WAAPI (поскольку помимо простого element.animate у WAAPI есть ещё много чего интересного). Мы еще не раз встретимся с document.timeline.

Поглядите остальные статьи из этой серии:

• Введение
• Часть 1: создание базовой анимации
• Часть 2: Объект AnimationPlayer и управления временными функциями
• Часть 4: групповые и последовательные эффекты
• Часть 5: траектории движений
• Заключение
• Полезные ссылки

P.S. Это тоже может быть интересно:

• Как читать W3C-спецификации