Адаптация анимации к частоте смене кадров монитора и мощности устройства пользователя: как и почему это важно? 🤔

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

А зачем? Какие проблемы? 1️⃣ Разное максимальное количество кадров для отрисовки у разных пользователей (разные мониторы).

Это значит, что временной промежуток между генерацией кадров просто "захардкодить" - нельзя, так как разным пользовательским мониторам кадров будет либо не хватать, либо их будет слишком много, а это значит, что мы потратили часть вычислительных ресурсов компьютера пользователя впустую;

2️⃣ Само выполнение функции для генерации следующего кадра занимает какое-то время, которое, в свою очередь, так же может динамично варьироваться в зависимости от мощности и загруженности вычислительных ресурсов устройства пользователя.

3️⃣ Представьте, что монитор пользователя поддерживает 240Герц, то есть нужно 240 вызовов функции генерации нового кадра в секунду, но «железо» у устройства пользователя слабоватое и наша функция за секунду может отработать всего 50 раз. Как тогда быть и не «повесить» устройство пользователя своими двухсот-сороками вызовами в секунду?!

Получается, что нужна некая точка синхронизации количества кадров, а, следовательно, количества вызовов нашей функции генерации нового кадра, которая, например, двигает простой синий квадрат вправо на 5 пикселей, в зависимости от экрана и вычислительных ресурсов устройства пользователя. И как быть?

Выход есть! Встречайте героя этого поста – функция requestAnimationFrame. 🤩

Эта функция принимает в себя коллбек – нашу функцию по генерации новых кадров в зависимости от устройства пользователя, и будет вызывать её как раз нужное количество раз. Отлично! Вроде как наши проблемы решены и всё будет супер. Но не тут то было..

Если взглянуть на анимацию на устройствах с разной частотой экрана, то вы увидите, что где-то наш синий квадрат "бежит" вправо быстрее, а где-то – медленнее. Как и почему так? Как это исправить? Об этом во второй части.

Набираем 15 ❤️, и я публикую вторую часть 😉