Что такое requestAnimationFrame?

Question

requestAnimationFrame — это метод в JavaScript, который сообщает браузеру, что нужно выполнить анимацию, и просит браузер вызвать указанную функцию для обновления анимации перед перерисовкой. Он синхронизируется с частотой обновления экрана, что делает анимацию плавной и оптимизированной. Вместо использования setTimeout или setInterval для анимации, requestAnimationFrame обеспечивает лучшее управление производительностью и энергопотреблением.

YeaHub · Accepted Answer

requestAnimationFrame — это метод для создания плавных анимаций в браузере. В отличие от setTimeout или setInterval, он автоматически синхронизируется с частотой обновления экрана (обычно 60 кадров в секунду), что делает анимацию более плавной. Этот метод также помогает браузеру приостанавливать анимацию, если вкладка не активна, что снижает нагрузку на систему.Пример использования requestAnimationFrame для создания простой анимации движения блока:let start = null; 
const element = document.getElementById("animatedBlock"); 
function animate(timestamp) {
	if (!start) start = timestamp;  
	let progress = timestamp - start;  
	element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;    
	if (progress < 2000) {
	 	// Анимация длится 2 секунды    
	 	requestAnimationFrame(animate);  
	} 
} 
requestAnimationFrame(animate);Этот пример обновляет положение элемента плавно по мере прогресса времени, используя requestAnimationFrame. Использование этого метода помогает экономить ресурсы браузера и поддерживать высокую производительность. Он широко применяется при создании интерактивных анимаций, игр и динамических пользовательских интерфейсов.