requestAnimationFrame() - sens Opcje

[-arrtxp-]

Witam, może ktoś mi na chłopski rozum wytłumaczyć po co ta funckja jest ?

[HTML] pobierz, plaintext 
Window.requestAnimationFrame()
[HTML] pobierz, plaintext 

Nie odsyłajcie mnie do google... chce dostać coś po polsku i przykład zastosowania. Trollom z góry dziękuje...

[lukasz1985]

Funkcja requestAnimationFrame służy do robienia animacji tak jak setInterval i setTimeout, a jej plusem ma być to, że ma mieć lepszą wydajność od pozostałych. Piszę "ma" bo to implementacja(czyli jak ta funkcja rzeczywiście się działa) zależy od przeglądarki jednak postaram Ci się to wyjaśnić jak tej funkcji użyć, zakładając pewną (oczywistą) implementację przez przeglądarkę.

Załóżmy, że masz do zrobienia jakąś animację, na przykład masz DIVa, który będzie się rozszerzać. Jest kilka sposobów na to, możesz użyć:
- setTimeout
- setInterval, albo
- requestAnimationFrame

W przypadku dwóch pierwszych sprawa wygląda dość prosto, używając setTimeout robisz coś takiego (będę pisał z kilkoma uproszczenami) :

[JAVASCRIPT] pobierz, plaintext 
function poszerz() {
  div.style.width += 1; // poszerz diva o 1 
  setTimeout(poszerz, 60); // wykonaj poszerz po 60 ms
}
 
window.onload = function() {
  poszerz();
}
[JAVASCRIPT] pobierz, plaintext 

Włączasz okno przeglądarki - okno się ładuje, po załadowaniu wykonuje się poszerz(). Funkcja poszerz() na końcu wyznacza czas po którym znów ma sie wykonać (setTimeout) . Efekt jest taki, że funkcja się zapętla i wykonuje się co 60 ms

Używając setInterval wyznaczasz interwał (przerwy) pomiędzy wykonaniami tej samej funkcji:

[JAVASCRIPT] pobierz, plaintext 
 
function poszerz() {
  div.style.width += 1; // poszerz diva o 1  
}
 
 
window.onload = function() { 
  setInterval(poszerz, 60); // Wykonuj poszerz co 60 ms. 
}
 
[JAVASCRIPT] pobierz, plaintext 

Program analogiczny do powyższego.

No i pora na requestAnimationFrame. Funkcja requestAnimationFrame (będę używał skrótu RAF) przyjmuje za argument tylko inną funkcję, a nie przyjmuje żadnych odstępów czasowych. Ktoś mógłby się zapytać, w jaki sposób w takim razie zrobić przy jej pomocy animację?
Otóż RAF nie działa tak jak setTimeout i setInterval. RAF powoduje że funkcja, którą jej prześlemy wywoła się w momencie najlepszym dla przeglądarki.
Co oznacza ten najlepszy moment? Ten moment to taki moment w którym synchronizacja animacji z odświeżaniem ekranu jest najlepsza.
Powiedzmy, że w powyższych przykładach dałeś 1 milisekunde. Oznacza to, że Twoja funkcja "poszerz()" musiałaby się wykonywać co 1 milisekunde. Co dałoby animację , której częstotliwość wynosi 1000 klatek/sekunde (fps). Teraz pytanie: po co to komu, skoro okno przeglądarki jest rysowane z częstotliwością np. 60 klatek/sekundę? Marnujesz tylko procesor.

Problem polega na tym, że Ty nie wiesz z jaką częstotliwością okno przeglądarki jest wyświetlane. To może być 60 fps lub równie dobrze 10 fps, jeśli masz otwarte 20 kart i jakąś mocną grę w tle. To wie sama przeglądarka i tylko ona zna najlepszy moment wykonania Twojej funkcji tak aby została ona wykonana przed kolejnym odświeżeniem okna przeglądarki.

W kodzie będzie to wyglądało tak:

[JAVASCRIPT] pobierz, plaintext 
function poszerz() {
  div.style.width += 1; // poszerz diva o 1  
  requestAnimationFrame(poszerz);
}
 
 
window.onload = function () {
  poszerz();
}
 
[JAVASCRIPT] pobierz, plaintext 

Zauważ jednak pewną rzecz.. Twój DIV będzie się poszerzał w takim tempie w jakim okno przeglądarki jest odświeżane. Żeby sobie z tym poradzić najlepiej jest obliczyć czas jaki upłynął od ostatniego odświeżenia:

[JAVASCRIPT] pobierz, plaintext 
// Poniższe czasy są w milisekundach
var czasPoprzedni; // Moment poprzedniego wykonania poszerz()
var czasRoznica ; // Czas który upłynął od poprzedniego wykonania poszerz()
var czasBiezacy; // Bieżący moment
 
function poszerz() {
  czasBiezacy = new Date.getTime();
  czasRoznica = czasBiezacy - czasPoprzedni;
  div.style.width += (czasRoznica)  * 0.01; // poszerz diva o 1  
  requestAnimationFrame(poszerz);
}
 
 
window.onload = function () {
  czasPoprzedni = new Date.getTime();
  poszerz();
}
 
[JAVASCRIPT] pobierz, plaintext 

Tak więc teraz im większa różnica pomiędzy poszczególnymi wywołaniami poszerz() tym więcej poszerzy się DIV.
W przypadku 1 klatki na sekundę poszerzy się o (1000 * 0.01 = 10) pikseli/ klatkę, przy 60 klatkach/sekunde to będzie (1000/60 * 0.01 = oblicz sobie pikseli / klatkę.

1 klatka na sekundę daje bardzo niepłynną "animację" to też zobaczysz diva , który będzie się poszerzał skokowo, w przypadku 60 zobaczysz płynną animację.

Mam nadzieję, że to nieco wyjaśnia użycie RAF. Jak powiedziałem wiele zależy od tego jak to implementują przeglądarki. W każdym razie - podstawowa zasada - to synchronizacja odświeżania okna z funkcją, która ma animować obiekty.

[-arrtxp-]

dzięki, za odpowiedź, choć juz się doczytałem w google