requestAnimationFrame()で、アニメーションの速度をデバイスの処理速度に依存しないようにする

Canvasなどでアニメーションさせる場合、
HTML5のAPIであるrequestAnimationFrame()を使うことで、
setInterval()を使うよりもブラウザの負担を軽減した、アニメーションを実装することができます。(参考: アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方 | 株式会社LIG)

しかしながら、requestAnimationFrame()は、setInterval()とちがい、時間間隔を指定した更新ではないため、
ブラウザやデバイスの処理速度によって、更新間隔が変化します。

そのため、requestAnimationFrame()でアニメーション速度を、デバイスやブラウザに関わらず一定にする場合、
更新毎に時間の経過を計測し、アニメーションの変化に反映させる必要があります。

時間の経過を配慮していないアニメーション
DEMO


  move();

  function move() {
    cx += 2;
    if(cx > canvas.width + 30)
     cx = -30;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(cx, cy, 30, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
    window.requestAnimationFrame(move);
  }

move();

function move() {

cx += 2;

if(cx > canvas.width + 30)

cx = -30;

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();

ctx.arc(cx, cy, 30, 0, Math.PI * 2);

ctx.fill();

ctx.closePath();

window.requestAnimationFrame(move);

}

時間の経過を配慮したアニメーション
DEMO2


  var lastTime = performance.now(),
      lastFrame = 0;
  move();

  function move() {
    var nowTime = performance.now(),
        time = nowTime - lastTime;
    lastTime = nowTime;
    cx += (time / 10);
    if(cx > canvas.width + 30)
     cx = -30;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(cx, cy, 30, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
    window.requestAnimationFrame(move);
  }