Мы использовали setInterval для управления всей анимацией JavaScript.
setInterval (performAnimation, 100);
Здесь 100 - довольно коварное магическое число. Приехать с таким номером (задержкой) очень сложно. Он должен быть достаточно коротким, чтобы анимация была плавной, но достаточно длинной, чтобы вносить изменения, которые браузер может отображать.
Интересный факт, который следует учитывать, это то, что большинство мониторов обновляют экран с частотой 60 Гц, то есть 60 раз в секунду, что означает 60 FPS (кадров в секунду). Таким образом, лучший интервал для анимации оказывается 17 мс. (1000 мс / 60).
Чтобы создать плавную анимацию, нужно точно знать, когда будет отрисован следующий кадр. CSS-анимации / переходы являются плавными, потому что браузер знает, что анимация вот-вот должна произойти, и затем может соответствующим образом обновить пользовательский интерфейс. Но в случае с JavaScript браузер не знает, что вот-вот должна произойти анимация.
requestAnimationFrame - это способ сообщить браузеру, что место занимает некоторая JavaScript-анимация.
requestAnimationFrame принимает функцию (обратный вызов) как единственный аргумент, который:
- выполняется перед перерисовкой экрана.
- необходимо внести все необходимые изменения в DOM, которые должны быть отражены как часть следующей перерисовки.
- вызывается только один раз.
- получает аргумент, который является временным кодом -
DOMHighResTimeStamp.
Теперь, чтобы выполнить анимацию, эту функцию обратного вызова нужно вызывать несколько раз.
Сделайте свою анимацию более плавной с помощью requestAnimationFrame.
Удачи, запрашивая кадр анимации в следующий раз, когда вы что-то анимируете ...
