Кратко

  • Первый публичный черновик W3C в июне 2013 года предложил модель общих правил времени и эффектов для CSS-переходов, CSS-анимаций и SVG-анимаций.
  • Текст 2014 года добавил интерфейс создания анимаций из скрипта с последующим выполнением браузером. В документе 2023 года подробно описаны текущее время, пауза, обратный ход, завершение и отмена.

За кулисами работают трое с секундомерами. Один вводит график на сцену переходом, другой крутит символ по кадрам, третий ведёт линию SVG. Читатель просит вернуться к тому месту, где линия коснулась нужного узла. Редактору приходится сводить показания разных часов. Можно назначить каждой фигуре таймер JavaScript и лично вычислять каждый промежуточный кадр. Тогда человек, который собирался объяснять устройство сети, целый день подстраивает маленькие часы.

Первый публичный черновик Web Animations от 25 июня 2013 года начинал с наблюдения: CSS Transitions, CSS Animations и SVG дают сходные возможности движения, но описывают их разными понятиями. Спецификация предложила абстрактную модель общего: временная шкала даёт положение во времени, эффект рассчитывает промежуточное значение, результаты могут сочетаться. Это не ответ на вопрос, зачем странице нужна анимация. Это общий язык для времени, на котором редактор может поставить свою сцену.

Черновик от 5 июня 2014 года связал эту модель с программным интерфейсом. Скрипт может создать анимацию, после чего её выполняет пользовательский агент. Такая работа отличается от обратного вызова страницы, который сам красит каждый кадр. Документ сопоставил интерфейс с requestAnimationFrame и описал их значения времени и порядок выполнения. Браузер крутит механизм, а сайт решает, когда его запустить и как дать читателю управлять ходом.

Пауза особенно нужна там, где движение несёт смысл. Читатель останавливает схему маршрута и разбирает подпись стрелки. Преподаватель проигрывает путь сигнала назад, чтобы показать его источник. Если анимация имеет осмысленное текущее время и состояние, можно вернуться к конкретной картине, а не запускать всю историю заново. Разным техникам больше не приходится выдавать редактору разные ответы на вопрос «где мы сейчас?».

Черновик Level 1 от 11 октября 2018 года продолжил разграничивать временную шкалу, объект анимации и эффект. Эффект говорит, что меняется, шкала даёт продвижение, состояние показывает ожидание, ход, паузу или завершение. Скорость и направление можно менять, не перерисовывая вручную каждый шаг. Кнопка перемотки выглядит простой потому, что внутри модели у настоящего момента есть точное место.

В тексте от 5 июня 2023 года разобран пульт управления: установка текущего времени и старта, воспроизведение, пауза, окончание, отмена, изменение скорости и обратное движение. Там же определены состояния готовности и завершения. Команда «остановить» может прийти ещё до фактического старта или прямо перед финишем. Браузер должен выбрать правильный переход между состояниями и показать правильный кадр. Для зрителя это одна кнопка; механизм не имеет права гадать.

Хронология W3C фиксирует черновики 2013, 2014, 2018 и 2023 годов. Её главная линия — общие часы для разных семейств анимации и управление ими из скрипта. Вопрос о том, можно ли использовать прокрутку как источник продвижения, относится к другой главе. Редактор по-прежнему выбирает, какое движение помогает объяснению и где читателю стоит дать паузу. Браузер следит за ходом часов; трое работников сцены могут убрать секундомеры.