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

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

Около года назад Google анонсировал «Материальный дизайн» с реализацией для веба на базе Полимера…, используя полифилл для предстоящего стандарта Web Animations API.

Я не слышал про этот API, но он меня заинтриговал, тем более, что было заявлено об эффекте MotionPath. Это ещё не было реализовано (и — спойлер — до сих пор не реализовано), но меня захватила сама его задача — дать возможность объединять подходы к анимации из CSS, JS и SVG. Спустя год Chrome и Firefox приступили к реализации, полифилл непрерывно развивается, так что пришло время взглянуть на него всерьёз.

А ведь так мало людей говорят про WAAPI! Я планирую начать серию статей, подчёркивая возможности, которые теперь есть в браузерах (и в полифилле), исследуя для чего нам нужен этот API, и выясняя нюансы. Будем также надеяться, что нам удастся вовлечь в обсуждение и в работу с этим API больше людей.

Что такое Web Animations API?

Начнём это исследование, выяснив что это такое и каковы его цели.

За последних лет пять анимация неплохо развилась, получив отличную поддержку в CSS и добавив новые улучшения в JavaScript. Но все плюсы каждого из подходов к анимации по-прежнему омрачаются кучей минусов.

• У CSS есть аппаратное ускорение для плавных переходов со встроенной поддержкой в браузере, но правила объявляются в CSS и заставляет хитро изворачиваться в JavaScript, чтобы изменять значения динамически.
• У requestAnimationFrame хорошая поддержка, и с ним браузер может выбирать наиболее удачные моменты для анимации, но он может зависать при тяжелых вычислениях. Он также часто требует больше математики, чтобы справиться с синхронизацией.
• setInterval познакомил многих разработчиков с анимацией, но он не точен и может привести к дёргающимся анимациям.
• jQuery.animate() познакомил с анимацией ряд других разработчиков, но он известен частыми проблемами с производительностью.
• Такие библиотеки, как Velocity и GreenSock (GSAP) улучшают производительность JavaScript, и отточены на множестве тестовых примеров практически до совершенства. Однако, они по-прежнему требуют поддержки и загрузки внешних библиотек.

В общем, нам нравится, когда браузеры поддерживают столько, сколько могут, и что они перенимают оптимизации. У браузеров есть document.querySelector, поскольку мы видели, как можно было выбирать DOM-элементы в jQuery. Так полезные функции библиотек стали встроенными возможностями браузеров. В идеале, мы могли бы обеспечить максимум контроля над анимацией на уровне браузера. А затем эти библиотеки сосредоточатся на более новых возможностях, и цикл повторится заново.

Для этого и существуют Web Animations API. Его цель — соединить мощь производительности CSS с плюсами и гибкостью JavaScript (и SVG-анимации, о которой мы поговорим в будущей статье), и заставить сами браузеры следить за тем, чтобы это хорошо работало.

Давайте решать это добавлением чего-то нового!

На прошлой работе нам как-то разослали письмо, в котором говорилось, что новости компании приходится отслеживать в слишком многих местах — в почте, на мониторах в офисе, в Yammer, в чате Google и в корпоративной сети/вики. Поэтому для решения этой проблемы, как они заявили… они решили добавить еще и блог.

Когда я только услышал про WAAPI, первой моей мыслью было, как и в той истории с блогом компании — это сделает только хуже. Конечно, блог не стал никаким единым местом для чтения новостей, а лишь добавился ко всем остальным, и в итоге оказался лишним.

Но здесь не тот случай. Перечитывая спецификацию (первый раз, когда я всерьез за это взялся) я увидел, как старательно она избегает этой ошибки. WAAPI не планируется на замену существующим поведениям (хотя, кажется какие-то браузеры уже потихоньку отменяют некоторые из них), а вместо этого объединяет различные способы и даже позволяет им взаимодействовать. Синтаксис похож на CSS, но добавляет переменные, элементы управления и вызов функций при завершении.

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

Так что Web Animations API — нечто свежее, и его реализация уже началась (в настоящее время в Chrome и Firefox (за флагом)) вдобавок к существующему полифиллу. В следующий раз мы начнём с рассмотрения возможностей, которое он даёт разработчикам… с примерами!

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

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

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

• «Родительский селектор» :has() — в реальность!
• Голограммы, пленочные засветки и шейдеры на чистом CSS
• Как читать W3C-спецификации