Animacje – setInterval() vs requestAnimationFrame()
Tym razem zajmiemy się animacjami w JS. Porównamy sobie rozwiązania wykorzystujące setInterval() oraz requestAnimationFrame(). Postaram się przedstawić zalety tego drugiego rozwiązania i wyjaśnić na jakie zasadzie ono działa.
Na początek przyjrzyjmy się prostemu kodowi, który jakiś czas temu publikowałem we wpisie slideUp w Vanilla JS
/**
* Funkcja, która zmniejsza wysokość elementu HTML wprost proporcjonalnie do zadanego czasu.
*
* Pierwszy parametr to element, którego wielkość będzie zmniejszana.
* Drugi parametr to czas w milisekundach w jakim element osiągnie wysokość zero
*/
function slideUp(item, time) {
//proste sprawdzenie czy to element HTML
//należałoby to zrobić dokładniej, ale niepotrzebnie zaciemni to rozwiązanie
if(typeof item === 'object' && typeof item.clientHeight !== 'undefined') {
var height = item.clientHeight; // można też użyć .offsetHeight
//określamy jak dokładna ma być animacja
var intervalTime = 5;
//określamy co ile ma być zmieniana wysokość
var step = (height * intervalTime) / time;
var id = setInterval(function(){
height = height - step;
//sprawdzam czy animacja się nie zakończyła
if(height > 0) {
//nadajemy nową wysokość
item.style.height = height+'px';
} else {
//ukrywamy element
item.style.display = 'none';
//usuwamy pętlę
clearInterval(id);
}
console.log('interval', height);
}, intervalTime);
} else {
console.log('Błąd! Nie mogę wykonać operacji na tym elemencie!');
}
}
W powyższym przykładzie animacja będzie wykonywana co 5 milisekund czyli 200fps (ang. frames per second). Przeciętny monitor posiada odświeżanie na poziomie 60MHz (odświeża obraz 60 razy na sekundę) co oznacza, że co najmniej 60% klatek będzie nie zauważalne dla użytkownika. Należałoby zmniejszyć odstęp między animacjami do około 60fps czyli wykonanie ponawiamy co około 17ms (1000ms / 60 = 16.6666).
Zalety requestAnimationFrame()
Jak wyżej zaprezentowałem możemy dostosować (w dużym uproszczeniu) setInterval() do odpowiedniej ilości klatek na sekundę. To nie spowoduje, że animacja będzie mniej płynna, a będzie to na pewno z korzyścią dla zużycia zasobów. Pamiętajmy jednak, że w setInterval() możemy jedynie optymalizować pod względem ilości klatek na sekundę ustawiając czas, co ile ma być wywoływana funkcja.
Natomiast requestAnimationFrame() nie tylko dostosowuje ilość wyświetlanych klatek na sekundę do 60fps (wg. rekomendacji W3C powinno to być zależne od odświeżania monitora) to jeszcze dodatkowo przeglądarka może zoptymalizować tą animację (np. gdy element jest nie widoczny to nie wykonuje ponownego odświeżenia).
Ujmując prościej zawsze gdzie mamy do czynienia z animacją (ponownym renderowaniu elementu na scenie) to zawsze powinniśmy użyć requestAnimationFrame(). Obecnie praktycznie wszystkie nowoczesne przeglądarki wspierają to rozwiązanie – możemy to sprawdzić w caniuse.com.
Implementacja requestAnimationFrame()
Spróbuję teraz zmodyfikować poprzednie rozwiązanie wykorzystując requestAnimationFrame():
/**
* Funkcja, która zmniejsza wysokość elementu HTML wprost proporcjonalnie do zadanego czasu.
*
* Pierwszy parametr to element, którego wielkość będzie zmniejszana.
* Drugi parametr to czas w milisekundach w jakim element osiągnie wysokość zero
*/
function slideUp(item, time) {
// proste sprawdzenie czy to element HTML
// należałoby to zrobić dokładniej, ale niepotrzebnie zaciemni to rozwiązanie
if(typeof item === 'object' && typeof item.clientHeight !== 'undefined') {
var height = item.clientHeight; // można też użyć .offsetHeight
// określamy jak dokładna ma być animacja
// przyjmujemy, że jest to 60fps
var intervalTime = 17;
//określamy co ile ma być zmieniana wysokość
var step = (height * intervalTime) / time;
// opakowaliśmy wszystko to co było w funkcji anonimowej
// w funkcję callback, ktora jest przekazyna do requestAnimationFrame
function callback(){
height = height - step;
// sprawdzam czy animacja się nie zakończyła
if(height > 0) {
// nadajemy nową wysokość
item.style.height = height+'px';
// ustawiam kolejną klatkę
requestAnimationFrame(callback);
} else {
// ukrywamy element
item.style.display = 'none';
}
};
// wywołujemy funkcję po raz pierwszy
callback();
} else {
console.log('Błąd! Nie mogę wykonać operacji na tym elemencie!');
}
}
Wymuszenie fps w requestAnimationFrame()
Przy naszej implementacji pojawia się jeden problem. Uznaliśmy, że ilość klatek na sekundę to 60. Co się stanie, gdy przeglądarka postanowi renderować element z inną wartości? Choćby dlatego, że użytkownik ma lepszy monitor, a jak za pewne pamiętasz rekomendacja W3C określa, że renderowanie elementu powinno być zgodne z odświeżaniem monitora.
Aby ograniczyć fps do np. 25 klatek na sekundę wystarczy wprowadzić drobną modyfikację:
/**
* Funkcja, która zmniejsza wysokość elementu HTML wprost proporcjonalnie do zadanego czasu.
*
* Pierwszy parametr to element, którego wielkość będzie zmniejszana.
* Drugi parametr to czas w milisekundach w jakim element osiągnie wysokość zero
*/
function slideUp(item, time) {
// proste sprawdzenie czy to element HTML
// należałoby to zrobić dokładniej, ale niepotrzebnie zaciemni to rozwiązanie
if(typeof item === 'object' && typeof item.clientHeight !== 'undefined') {
var height = item.clientHeight; // można też użyć .offsetHeight
// określamy jak dokładna ma być animacja
// przyjmujemy, że jest to 25fps
var intervalTime = 40;
//określamy co ile ma być zmieniana wysokość
var step = (height * intervalTime) / time;
// opakowaliśmy wszystko to co było w funkcji anonimowej
// w funkcję callback, ktora jest przekazyna do requestAnimationFrame
function callback(){
// ustawiamy timeout z czasem zgodnym z fps
setTimeout(function(){
height = height - step;
// sprawdzam czy animacja się nie zakończyła
if(height > 0) {
// nadajemy nową wysokość
item.style.height = height+'px';
// ustawiam kolejną klatkę
requestAnimationFrame(callback);
} else {
// ukrywamy element
item.style.display = 'none';
}
}, intervalTime);
};
// wywołujemy funkcję po raz pierwszy
callback();
} else {
console.log('Błąd! Nie mogę wykonać operacji na tym elemencie!');
}
}