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

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

Мы неплохо поработали и, надеюсь, выяснили, что из себя представляет Web Animations API. В завершении этой серии давайте резюмируем, что мы обсудили ранее и рассмотрим, что ещё не реализовано.

Зачем заморачиваться с API?

Во введении мы выяснили, что этот API даёт возможность объединять подходы к анимации из CSS, JS и SVG… с целью взять от них самое лучшее. Это значит, что, например, JavaScript может наконец дорваться до аппаратного ускорения, которое уже много лет имеется у CSS, и вы не ограничиваетесь декларативной природой CSS. Этот API предназначен не для замены библиотек (напр. GSAP), а просто  чтобы дать больше возможностей на уровне браузера.

Firefox и Chrome уже начали реализацию, и у Edge есть кое-какие наработки. Пока авторы дописывает спецификацию, уже сегодня можно поиграться с этим API при помощи полифилла.

Основы анимации

Для создания базовой анимации мы действуем по аналогии с CSS — задаем ключевые кадры и свойствадля временной шкалы.

var player = document.getElementById('toAnimate').animate([
    { transform: 'scale(1)', opacity: 1, offset: 0 },
    { transform: 'scale(.6)', opacity: .6, offset: 1 }
  ], {
    duration: 700,
  });

Управление временной шкалой – очевидная вещь, отсутствующая в сегодня в CSS. Считывать состояние анимации можно при помощи свойства playState, а изменение состояния – методами play(), pause(), и finish(). Также с помощью свойства playbackRate (доступного для чтения/записи) можно изменять скорость воспроизведения. Можно проверять (или изменять) свойство currentTime, и можно установить функцию обратного вызова onfinish, которая вызывается по завершению анимации.

Множественные анимации и группировка

Web Animations API позволяет множественные анимации для элемента, создавая отдельные объекты анимации. По умолчанию временная шкала для document предоставляет доступ ко всем анимациям с помощью метода getAnimations(). Анимации можно группировать, проигрывая их вместе или одну за другой, при помощи групповых и последовательных эффектов (доступных в полифилле, хоть их и нет в первой спецификации).

Траектория движения и будущее

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

Интервал

Если значения смещения не указаны, то текущие реализации предлагают по умолчанию устанавливать интервал между ключевыми кадрами так, что они окажутся распределены равномерно (к примеру, у трёх кадров смещения будут 0, .5 и 1). Спецификация также определяет способ задания темпа пошаговой анимации на основе свойств, чтобы у них была постоянная скорость изменения. Это хорошо описано в спецификации в разделе «Интервалы между ключевыми кадрами»

Промисы

Спецификация расширилась и включает промис ready, который будет заменён на новый промис всякий раз, когда анимация отменяется или входит в состояние ожидания (которое обычно происходит перед переходом в состояние «проигрывания» или «паузы»). Кроме того, как мы уже обсуждали в этой серии, у нас будет возможность использовать промис finished для запуска функции после завершения анимации.

Продолжим говорить про WebAnimations API

Люди начинают всё больше говорить про этот API, и я надеюсь на продолжение этого разговора. Спецификации, браузерные реализации и полифилл, постоянно развиваются, и уже готовы для пристального изучения.

Иногда более целесообразен CSS, иногда requestAnimationFrame, а порой наилучшим решением будет использование библиотек. Полезно знать, когда лучше использовать то или иное средство, и этот API предоставляет множество вещей, которые ранее нам не были доступны… так что играйте с ним на здоровье.

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

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

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

• Голограммы, пленочные засветки и шейдеры на чистом CSS