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.