Animacje za pomocą requestAnimationFrame

requestAnimationFrame (rAF) planuje wywołanie funkcji zwrotnej przed następnym odświeżeniem przeglądarki, synchronizując animację z częstotliwością odświeżania ekranu (zwykle 60 kl./s). W przeciwieństwie do setInterval, rAF wstrzymuje działanie, gdy karta jest ukryta, oszczędzając procesor i baterię.

Pętla rAF: zdefiniuj funkcję animate, która rysuje bieżącą klatkę, a następnie wywołuje requestAnimationFrame(animate), aby zaplanować następną. Przeglądarka wywołuje animate przed każdym odświeżeniem, tworząc ciągłą animację z częstotliwością odświeżania ekranu.

rAF przekazuje do funkcji zwrotnej wartość DOMHighResTimeStamp (liczbę milisekund od załadowania strony). Używaj jej do obliczania ruchu niezależnego od częstotliwości klatek: delta = timestamp - lastTimestamp. Pomnóż prędkość przez delta, aby niezależnie od częstotliwości klatek pokonywać tę samą odległość w ciągu sekundy.

Oblicz czas, który upłynął od poprzedniej klatki, i odpowiednio przeskaluj ruch. Obiekt poruszający się z prędkością 100px/s pokonuje w każdej klatce 100 * (delta / 1000) pikseli. Zapewnia to spójne działanie fizyki na ekranach 30fps i 144fps.

rAF zwraca uchwyt. Anuluj animację za pomocą cancelAnimationFrame(handle). Przechowuj uchwyt w zmiennej, sprawdzaj flagę running wewnątrz pętli lub anuluj animację podczas czyszczenia komponentu. Zawsze anuluj pętle, gdy element zostaje usunięty z DOM.

W każdej klatce: (1) wywołaj clearRect dla całego canvasu, (2) zaktualizuj zmienne stanu (pozycję, kąt, czas), (3) narysuj wszystkie obiekty w nowych pozycjach, (4) wywołaj requestAnimationFrame dla następnej klatki. Nigdy nie pomijaj clearRect — stare klatki będą się wtedy nakładać i utworzą smugę.

Używaj przejść i animacji CSS do prostych animacji opartych na właściwościach (efekty po najechaniu, wysuwanie modalu). Używaj rAF do złożonych, interaktywnych animacji — pętli gier, symulacji fizyki i renderowania na canvasie — gdy potrzebujesz precyzyjnej kontroli nad każdą klatką.

W przypadku złożonych scen najpierw rysuj na canvasie poza ekranem, a następnie w ramach jednej operacji narysuj go za pomocą drawImage na widocznym canvasie. Zapobiega to migotaniu, ponieważ nigdy nie jest wyświetlana częściowo narysowana klatka — widoczny canvas jest aktualizowany atomowo w każdej klatce.

Ogranicz liczbę klatek do niższej wartości (np. 30fps): przed renderowaniem sprawdź, czy od ostatniego rysowania upłynęło wystarczająco dużo czasu. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. Niezależnie od tego planuj kolejne wywołania rAF, aby zachować responsywność.

Panel Performance w Chrome DevTools rejestruje wywołania rAF na wykresie płomieniowym JavaScriptu. Szukaj długich wywołań, które trwają ponad 16 ms — powodują one gubienie klatek. Używaj miernika FPS (Rendering → FPS Meter), aby obserwować częstotliwość klatek w czasie rzeczywistym podczas interakcji.

W przypadku prostszych animacji deklaratywnych, bez ręcznego zarządzania czasem, użyj: element.animate(keyframes, options). WAAPI obsługuje funkcje czasu, tryby wypełnienia i iteracje, przekazując obliczanie klatek przeglądarce. Używaj rAF do niestandardowej logiki renderowania, której nie można wyrazić za pomocą WAAPI.

Dlaczego w pętli requestAnimationFrame prędkość animacji należy pomnożyć przez czas delta?

requestAnimationFrame synchronizuje animację JavaScriptu z częstotliwością odświeżania ekranu i wstrzymuje ją na ukrytych kartach. Parametr timestamp umożliwia ruch niezależny od częstotliwości klatek dzięki skalowaniu przez czas delta. Schemat pętli animacji canvas (wyczyść, zaktualizuj, narysuj, zaplanuj) w połączeniu z cancelAnimationFrame podczas czyszczenia stanowi podstawę płynnych i wydajnych animacji internetowych.