Как подкрутить «часы» браузера, для замедления анимаций?

Question

[Сергей Соколов]

Есть страница или SVG с некоей анимацией. JS, CSS transition.

Есть ли браузерные движки, headless браузеры, в которых можно было бы взять контроль над часами, ответственными за эти анимации?

Хочется использовать генерируемые браузером кадры с большой точностью: получить в картинки фазы анимации с частотой 1000fps например.

Представляю, что внутри браузера берётся «текущее» время, и в зависимости от него вычисляется состояние анимируемых элементов: движками JS, CSS. Если суметь устанавливать это время, и неспеша сохранять в графический файл рендер экрана, можно получить раскадровку с любой точностью.

Answer 1

[Максим Гречушников]

Сделал перевод статьи по анимациям для начинающих. От и до расписано что для чего. Живые примеры тут же в тексте. Можно копировать и вставлять сразу к себе на сайт.

вам нужно animation-step

devdocs.ru/verstka/css3-animations-for-beginners

Answer 2

[Сергей Мельников]

есть вот такое https://developer.mozilla.org/en-US/docs/Web/API/w...

не совсем понятен вопрос, что значит контроль над временем? в любой анимации, пусть то будет js или css анимация, всегда четко задается время этой анимации, вот вы и поставьте столько, сколько надо

Comments

[Сергей Соколов]

Браузеры рендерят максимум 60 кадров в секунду, а то и меньше. С начала анимации в секундах первые кадры это 0, 0.016, 0.033, .. Я же хочу получить PNG по состоянию анимаций на 0, 0.001, 0.002 и т.д.

[Сергей Мельников]

задайте время анимации равное 1000 секундам и получайте png в 1 секунду, 2 секунду, 3 ... что тут непонятного?

[Сергей Соколов]

Сергей Мельников: красиво ) Сложность в том, что присылать дизайны и анимации будут сторонние веб-разработчики, а замедлять в 1000 раз все анимации придётся нам, причём как-то автоматизировать этот процесс: сложность (в присланном JS коде могут быть нетривиальные вычисления времени) и риск ошибок.