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

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

Давайте продолжим изучать множественные анимации с Web Animations API, и рассмотрим несколько вещей, которые сегодня доступны в полифилле, предназначенные для группировки и последовательности анимаций.

Объект KeyframeEffect

KeyframeEffect принимает три параметра: элемент для анимации, массив ключевых кадров и опции шкалы времени. Все эти параметры мы видели во время использования element.animate(). По сути, этот новый объект и есть основа для одиночной анимации, и мы увидим это при обсуждении способов группировки и последовательности анимаций. Объект не запускает анимацию, а просто определяет её.

var elem = document.getElementById('toAnimate');
var timings = {
  duration: 1000,
  fill: 'both'
}
var keyframes = [
  { opacity: 1 }.
  { opacity: 0 }
];

var effect = new KeyframeEffect(elem, keyframes, timings);

Объекты GroupEffect

Хотя это нигде еще нативно не реализовано, и даже в спецификации 1 уровня этого нет, полифилл дает возможность группировать анимации и проигрывать их вместе. Объект GroupEffect (да, он вот-вот появится в спецификации второго уровня) группирует один и более объектов для одновременного проигрывания.

GroupEffect принимает параметр эффектов, куда можно передать массив объектов KeyframeEffect, представляющий множественные анимации. Как только объект определён, можно проигрывать группу анимаций в шкале времени по умолчанию.

var elem = document.getElementById('toAnimate');
var elem2 = document.getElementById('toAnimate2');
var timings = {
  duration: 1000
}
var keyframes = [
  { opacity: 1 }.
  { opacity: 0 }
];

var kEffects = [
  new KeyframeEffect(elem, keyframes, timings),
  new KeyframeEffect(elem2, keyframes, timings)
];
var group = new GroupEffect(kEffects);
document.timeline.play(group);

Последовательные эффекты

Подобно GroupEffect, SequenceEffect позволяет группировать множественные анимации (указанные в объектах KeyframeEffect) вместе… но проигрывать их не одновременно, а одну за другой. Также (как указано в полифилле) можно применять GroupEffect и SequenceEffect вместе (например, для группировки множественных последовательностей).

See the Pen vNXGxL by Максим (@psywalker) on CodePen.

С последовательностями нам не придётся пробираться окольными тропами с CSS или с ранее рассмотренными средствами API анимаций. Нам бы пришлось устанавливать такие задержки, чтобы предыдущие анимации успели закончиться, или использовать обратные вызовы finish. Эти методы трудно поддерживать, и они бывают не слишком точны.

Используя прежние переменные из примера кода про GroupEffect:

var sequence = new SequenceEffect(kEffects);
document.timeline.play(sequence);

Альтернативный способ создания анимации

Ранее мы уже обсуждали создание анимаций с element.animate(). Это быстрый способ создать анимацию, тут же её проиграть, и сохранить ссылку на объект AnimationPlayer. Мы рассматривали его прежде всего потому, что он уже поддерживаетсяв Chrome, а также в полифилле. Firefox почти поддерживает альтернативный вариант… но еще не настолько, чтобы этим можно было пользоваться или хотя бы продемонстрировать (даже с полифиллом). Тем не менее давайте взглянем на него одним глазком, поскольку он представляет ещё один способ применения KeyframeEffect, и описан в спецификации первого уровня, так что уже скоро мы увидим больше его возможностей.

Сначала вспомним, как работает element.animate().

var elem = document.getElementById('toAnimate');
var timings = {
  duration: 1000,
  fill: 'both'
}
var keyframes = [
  { opacity: 1 }.
  { opacity: 0 }
];

elem.animate(keyframes, timings);

А теперь применим те же переменные, но уже с конструктором Animation.

var kEffect = new KeyframeEffect(elem, keyframes, timings);
var player = new Animation(kEffect, elem.ownerDocument.timeline);
player.play();

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

Заключение и в следующей серии

Как только спецификация 2 уровня выйдет из черновиков, во всех этих *Effects должно появиться больше определенности. В этой серии планируется ещё пара статей. В следующей серии мы снова заглянем в будущее и увидим, что ещё нас ожидает в ближайшее время.

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

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

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

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