requestAnimationFrame()

window.requestAnimationFrame() - вказує браузеру що буде виконуватися анімація.

Синтаксис:

window.requestAnimationFrame(callback)

Параметри:

callback - функція яка буду викликатися для анімації.

Опис:

При створені анімації: зміна позиції, зміна прозорості елементу, малювання у canvas тощо в браузері призведе до перемалювання веб-сторінки.

Для створення анімації зазвичай створюють функцію яка робить певні дії для анімації і викликається через певний час за допомогою таймера:

function animations(){ px+=5; el.style.top=px; //продовжувати анімацію доки top менше 350 if(px<350)setTimeout('animations();',50); else el.style.position='static'; } var el=document.getElementsByTagName('p')[0]; el.style.position='fixed'; var px=0; animations();

Такий спосіб є не оптимальний так як запускається таймер через вказаний час при цьому не враховується чи є вікно баузера активним, додаткове перемалювання веб-сторінки так як браузер часто це робить.Тому було створено requestAnimationFrame().

window.requestAnimationFrame метод об'єкту window який вказує браузеру яка функція буде виконувутися для анімації будь якого типу (DOM, canvas, WebGL).

При використані window.requestAnimationFrame браузер оптимізовує перемалювання веб-сторінки, анімація більш рівними, зменшується нагрузка на ЦП.

window.requestAnimationFrame() повертає ідентифікатор який можна використати у window.cancelAnimationFrame() для відміни анімації.

При цьому браузер сам задає частоту кадрів. Яку може змінювати якщо вікно не активне, або низький заряд батареї у мобільних пристроях тощо. Частота перемалювання не може бути більшою ніж 60 раз за 1 секунду (60 кадрів за секунду).

requestAnimationFrame є загальним методом для анімації який зазвичай підтримують усі браузери, але кожна платформа стфорила свій оптимізований метод. WebKit: webkitRequestAnimationFrame, Mozilla: mozRequestAnimationFrame, Microsoft msRequestAnimationFrame.

Кросбраузерний requestAnimationFrame:

window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window .webkitRequestAnimationFrame || window .mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame|| function( callback){ window.setTimeout(callback, 17 ); }; })();

Приклад:

function anime() { //опис самої анімації requestAnimationFrame (anime); } //перший запуск функції anime(); function animations(){ px+=5; el.style.top=px; //продовжувати анімацію доки top менше 350 if(px<350) window.requestAnimationFrame (animations); else el.style.position='static'; } var el=document.getElementsByTagName('p')[0]; el.style.position='fixed'; var px=0; window.requestAnimationFrame( animations); //функція анімації function anime(){ for(i=0; i<mas.length;i++){ let t=Number.parseInt(mas[i].style.top)+ Math.floor(Math.random()*3); if(t>window.innerHeight)t=-5; mas[i].style.top=t; let l= (parseInt( mas[i].style.left )+Math.floor(Math.random() * (1 - -1 + 1)) + -1); if(l<-2)l=window.innerWidtg; if(l>window.innerWidth) l=-2; mas[i].style.left=l; } window.requestAnimationFrame(anime); }; count=33; //кількість сніжинок mas=[]; //масив сніжинок //створюємо кожну сніжинку(елемент) for(i=0; i<count; i++){ mas[i]=document.createElement('span'); mas[i].innerText='*'; mas[i].style.color='blue'; mas[i].style.position='fixed'; mas[i].style.top='-'+Math.floor(Math.random()*(window.innerHeight/1.2))+'px'; mas[i].style.left=Math.floor(Math.random()*window.innerWidth); ; document.body.appendChild(mas[i]); } //перший запуск анімації anime();