Как работает Request Animation Frame?

RequestAnimationFrame: Механика и применение

RequestAnimationFrame (rAF) — один из самых мощных API браузера для создания плавных анимаций. За 10+ лет разработки я вижу, что это фундаментальный инструмент, который часто неправильно понимают. Давайте разберём как это работает на самом деле.

Базовый синтаксис

const animationId = requestAnimationFrame(callback);

// callback получает параметр - timestamp (DOMHighResTimeStamp)
function myAnimation(timestamp) {
  console.log('Вызвано в:', timestamp);
  
  // Сделать что-то
  element.style.left = timestamp % 800 + 'px';
  
  // Для непрерывной анимации - вызвать снова
  requestAnimationFrame(myAnimation);
}

requestAnimationFrame(myAnimation);

Как работает RequestAnimationFrame

1. Синхронизация с refresh rate монитора

rAF синхронизируется с частотой обновления монитора, обычно 60 FPS:

// На 60 FPS монитор обновляется каждые ~16.67ms
// Браузер вызывает callback в оптимальный момент

let previousTime = 0;

function trackFrameTiming(currentTime) {
  const deltaTime = currentTime - previousTime;
  console.log('Время между кадрами:', deltaTime); // ~16.67ms
  previousTime = currentTime;
  
  requestAnimationFrame(trackFrameTiming);
}

requestAnimationFrame(trackFrameTiming);

Это ключевое преимущество перед setTimeout — браузер автоматически синхронизирует callback.

2. Макротаск vs Микротаск

rAF вызывается между обработкой макротасков и перерисовкой (repaint):

console.log('1. Скрипт начал');

setTimeout(() => {
  console.log('4. Макротасок (setTimeout)');
}, 0);

Promise.resolve().then(() => {
  console.log('2. Микротасок (Promise)');
});

requestAnimationFrame(() => {
  console.log('3. Анимация (перед repaint)');
});

console.log('Скрипт закончил');

// Вывод:
// 1. Скрипт начал
// Скрипт закончил
// 2. Микротасок (Promise)
// 3. Анимация (перед repaint)
// 4. Макротасок (setTimeout)

Практические примеры

1. Простая анимация движения

const box = document.querySelector('.box');
let position = 0;
const speed = 2; // px per frame

function animate(timestamp) {
  position += speed;
  box.style.transform = `translateX(${position}px)`;
  
  if (position < 400) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

2. Плавная анимация с длительностью

function animateWithDuration(element, duration, startValue, endValue) {
  let startTime = null;
  
  function frame(timestamp) {
    if (startTime === null) startTime = timestamp;
    
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / duration, 1); // 0 to 1
    
    // Интерполяция
    const currentValue = startValue + (endValue - startValue) * progress;
    element.style.opacity = currentValue;
    
    if (progress < 1) {
      requestAnimationFrame(frame);
    }
  }
  
  requestAnimationFrame(frame);
}

// Использование: затемнить за 1 секунду
animatElement(element, 1000, 1, 0);

3. Easing функции (плавная анимация)

// Easing function: ease-in-out
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

function animateWithEasing(element, duration) {
  let startTime = null;
  
  function frame(timestamp) {
    if (startTime === null) startTime = timestamp;
    
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const eased = easeInOutQuad(progress); // Применить easing
    
    element.style.transform = `translateY(${eased * 500}px)`;
    
    if (progress < 1) {
      requestAnimationFrame(frame);
    }
  }
  
  requestAnimationFrame(frame);
}

Отмена анимации

const animationId = requestAnimationFrame(animate);

// Остановить анимацию
button.addEventListener('click', () => {
  cancelAnimationFrame(animationId);
  console.log('Анимация отменена');
});

Частые ошибки

Ошибка 1: Игнорирование timestamp

// ❌ ПЛОХО: Зависит от скорости выполнения
let x = 0;
function animate() {
  x += 1; // Может быть 1px, а может 10px в зависимости от CPU
  element.style.left = x + 'px';
  requestAnimationFrame(animate);
}

// ✅ ХОРОШО: Использовать deltaTime
let lastTime = 0;
const speed = 100; // px per second

function animate(timestamp) {
  if (lastTime === 0) lastTime = timestamp;
  const deltaTime = (timestamp - lastTime) / 1000; // в секундах
  const movement = speed * deltaTime;
  x += movement;
  element.style.left = x + 'px';
  lastTime = timestamp;
  requestAnimationFrame(animate);
}

Ошибка 2: Забыть про cancelAnimationFrame

// ❌ ПЛОХО: Memory leak
function Component() {
  useEffect(() => {
    const id = requestAnimationFrame(animate);
    // Не отменена при unmount
  }, []);
}

// ✅ ХОРОШО: Очистить на выходе
function Component() {
  useEffect(() => {
    const id = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(id); // Cleanup
  }, []);
}

Ошибка 3: Несколько requestAnimationFrame на один элемент

// ❌ ПЛОХО: Конфликт между разными анимациями
requestAnimationFrame(() => { element.style.opacity = '0.5'; });
requestAnimationFrame(() => { element.style.left = '100px'; });
// Одна может перезаписать другую

// ✅ ХОРОШО: Объединить в один callback
function animateElement(timestamp) {
  element.style.opacity = '0.5';
  element.style.left = '100px';
}
requestAnimationFrame(animateElement);

React Hook для анимаций

import { useRef, useEffect } from 'react';

function useRafAnimation(onFrame) {
  const idRef = useRef(null);

  useEffect(() => {
    function frame(timestamp) {
      onFrame(timestamp);
      idRef.current = requestAnimationFrame(frame);
    }
    
    idRef.current = requestAnimationFrame(frame);
    
    return () => {
      if (idRef.current) {
        cancelAnimationFrame(idRef.current);
      }
    };
  }, [onFrame]);
}

// Использование
function AnimatedBox() {
  const ref = useRef(null);
  let x = 0;

  useRafAnimation((timestamp) => {
    x += 2;
    if (ref.current) {
      ref.current.style.transform = `translateX(${x}px)`;
    }
  });

  return <div ref={ref} className="box" />;
}

Производительность

Правило 60 FPS

// На каждый frame есть ~16.67ms
// Работа должна завершиться за это время

function expensiveAnimation(timestamp) {
  const startTime = performance.now();
  
  // Тяжелая работа
  for (let i = 0; i < 1000000; i++) {
    Math.sqrt(i);
  }
  
  const endTime = performance.now();
  console.log(`Работа заняла ${endTime - startTime}ms`);
  // Если > 16.67ms - кадр будет пропущен (jank)
}

Альтернативы

CSS Animations

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(400px); }
}

.box {
  animation: slide 2s ease-in-out;
}

Преимущество CSS: Браузер может оптимизировать, работает даже когда tab неактивен.

setTimeout (не рекомендуется для анимаций)

// ❌ Может быть несинхронизирован с refresh rate
setTimeout(() => {
  element.style.transform = `translateX(${x}px)`;
}, 16); // Не гарантирует 60 FPS

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