Javascript request Animation Frame Metodu
Biliyorsunuz, Javascript'de bir işi, işleyişi tekrar etmek için temel anlamda iki metod kullanıyoruz. Bunlar setInterval
ve setTimeout
metodları.
Bu metodlardan harhangi birini kullanarak bir animasyon işlemini yapması için çalışır hale getirdiğimizi varsayalım. Hazırladığımız sayfada animasyon çalışırken iyi hoş.Peki animasyonun çalıştığı sayfadan ayrılıp başka bir pencereye geçersek veya web tarayıcısını simge durumuna küçültürsek? Animasyon devam edecek mi? Evet edecek. İşte bu durum bazı sıkıntılara yol açıyor. Özellikle canvas üzerinde çizimler yapıyor ve hatta işin içine 3 boyutlu grafik işleme işlerinin girdiğini düşünürsek, bu durum boş yere merkezi işlem birimi ve grafik kartı işlemcisinin kullanımı anlamına geliyor.
Peki işin doğrusu nedir? requestAnimationFrame
kullanımı. Eğer biz senaryosunu kafamızda çizdiğimiz uygulamayı setInterval
veya setTimeout
ile yapmak yerine requestAnimationFrame
ile yapsaydık bu tip bir sıkıntı olmayacaktı. Zira bu metod ile çalışan animasyon, sayfa herhangi bir şekilde terkedildiği takdirde duracak ve sayfaya yeniden gelindiğinde kaldığı yerden devam edecekti.
Temelde bakıldığında requestAnimationFrame
metodu da kendi içerisinde setTimeout
kullanıyor. Hemen requestAnimationFrame
metodu içeriğine bakalım.
window.requestAnimationFrame = (function () {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
})();
Gördüğünüz üzere setTimeout
kullanılıyor ve fps oranı olarakda insan gözünün en iyi ayırt edebileceği oran olan 1000/60
verilmiş durumda.
Hemen bir örnek yapalım da, ciğerlerimiz bayram etsin. Canvas üzerine çok basit bir çizim yaptırıp, bu çizimi bir animasyon işlemi haline getirelim.
<canvas id="canvas" width="900" height="200" style="background:black"></canvas>
<br />
<input type="button" value="Run" id="run" />
function init() {
var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
ctx.fillRect(0, 0, canvas.width, canvas.height);
var radius = 1;
var color = 0;
function draw() {
ctx.fillStyle = 'hsl(' + color++ + ',100%,40%)';
ctx.beginPath();
ctx.arc(450, 200, radius, 0, Math.PI * 2, false);
ctx.fill();
radius += 0.5;
if (color < 600) requestAnimationFrame(draw);
}
draw();
}
document.getElementById('run').onclick = function () {
init();
};
Çalışır halini görmek için tıklayın.
İsterseniz bu animasyonu çalıştırıp, simge durumuna küçültün ve bir yaz tatili yapıp gelin. Sayfayı tekrar açtığınızda animasyonun kaldığı yerden devam ettiğini göreceksiniz.