Как подкрутить «часы» браузера, для замедления анимаций?
Есть страница или SVG с некоей анимацией. JS, CSS transition.
Есть ли браузерные движки, headless браузеры, в которых можно было бы взять контроль над часами, ответственными за эти анимации?
Хочется использовать генерируемые браузером кадры с большой точностью: получить в картинки фазы анимации с частотой 1000fps например.
Представляю, что внутри браузера берётся «текущее» время, и в зависимости от него вычисляется состояние анимируемых элементов: движками JS, CSS. Если суметь устанавливать это время, и неспеша сохранять в графический файл рендер экрана, можно получить раскадровку с любой точностью.
Сделал перевод статьи по анимациям для начинающих. От и до расписано что для чего. Живые примеры тут же в тексте. Можно копировать и вставлять сразу к себе на сайт.
не совсем понятен вопрос, что значит контроль над временем? в любой анимации, пусть то будет js или css анимация, всегда четко задается время этой анимации, вот вы и поставьте столько, сколько надо
Браузеры рендерят максимум 60 кадров в секунду, а то и меньше. С начала анимации в секундах первые кадры это 0, 0.016, 0.033, .. Я же хочу получить PNG по состоянию анимаций на 0, 0.001, 0.002 и т.д.
Сергей Мельников: красиво ) Сложность в том, что присылать дизайны и анимации будут сторонние веб-разработчики, а замедлять в 1000 раз все анимации придётся нам, причём как-то автоматизировать этот процесс: сложность (в присланном JS коде могут быть нетривиальные вычисления времени) и риск ошибок.
Простой
Средний
Простой
