requestAnimationFrame()

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

Синтаксис:

window.requestAnimationFrame(callback)

Параметри:

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

Опис:

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

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

function animations(px){ if(px===undefined)px=0; px+=5; el.style.top=px+'px'; //продовжувати анімацію доки top менше 350 if(px<350) setTimeout(animations,50,px); else el.style.position='static'; } el=document.getElementsByTagName('p')[0]; el.style.position='fixed'; el.style.backgroundColor='red'; 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 anim() { //опис самої анімації requestAnimationFrame(anim); } //перший запуск функції anim();

Приклад анімації літаючаго квадрата:

//функція анімації function animeRect(){ var top=parseInt(rect.style.top), left=parseInt(rect.style.left); if(top<0)animeRectTop=false; if(top>window.innerHeight)animeRectTop=true; if(left<0)animeRectLeft=false; if(left>window.innerWidth)animeRectLeft=true; rect.style.top=(animeRectTop? top-1: top+1)+'px'; rect.style.left=(animeRectLeft? left-1: left+1)+'px'; requestAnimationFrame(animeRect); }; var animeRectLeft=true; var animeRectTop=true; //створюємо елемент var rect=document.createElement('div'); rect.style.backgroundColor='blue'; rect.style.position='fixed'; rect.style.width='45px'; rect.style.height='45px'; rect.style.top=Math.floor(Math.random()*(window.innerHeight/2))+'px'; rect.style.left=Math.floor(Math.random()*window.innerWidth)+'px'; document.body.appendChild(rect); //перший запуск анімації animeRect();

Приклад анімації падаючих сніжинок:

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