如何从“SetInterval”切换到“请求动画帧”[关闭]

Question

我创建了一个简单的画布动画，听说使用“请求动画帧”比使用“设置间隔”更好，但不知道该怎么做？

现在是这样的：

http://jsfiddle.net/rC7zJ/

var width = 48;
var height = 87;
var speed = 100; //ms
var frames = 1; // Total frames - 1, as frame start from 0 not 
var currentFrame = 0;

canvas = document.getElementById("CanvasAnimate");
ctx = canvas.getContext("2d");
imageTadPole = new Image()
imageTadPole.src = 'https://dl.dropbox.com/u/19418366/tadpole.png';

function draw(){
    ctx.clearRect(0, 0, width, height);
    ctx.drawImage(imageTadPole, width * currentFrame, 0, width, height, 0, 0, width, height);

    if (currentFrame == frames) {
        currentFrame = 0;
    } else {
        currentFrame++;
    }
}

setInterval(draw, speed); 

任何帮助将不胜感激！

Answer 1

总是从 Paul Irish 的 requestAnimationFrame 跨浏览器 shim 开始

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

然后只需编写一个动画函数：

1. 更新驱动动画的变量（位置、速度、颜色变化等）
2. 使用画布上下文绘制当前帧
3. 通过重新调用 requestAnimFrame 使动画在下一帧保持活跃

这是示例骨架代码：

    function animate() {

      // update animation variables
      X+=20;
      Velocity +=10;

      // clear the canvas and draw the current frame
      // based on the variables you just updated
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.rect(x,y,75,50);

      // request new frame to keep the animation going
      requestAnimFrame( animate );
    }

以下是如何降低动画的速度（如 FPS——但不是）：

// set a countdown "throttle" that will slow animate() down by 4X
var notEveryTime=3;

function animate() {

  // if notEveryTime hasn't counted down to 0
  // then just don't animate yet
  if(--notEveryTime>0){ return; };

  // update animation variables
  X+=20;
  Velocity +=10;

  // clear the canvas and draw the current frame
  // based on the variables you just updated
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.rect(x,y,75,50);

  // request new frame to keep the animation going
  requestAnimFrame( animate );

  // reset notEveryTime
  notEveryTime=3;

}

并且做阅读 Anreas 的好建议：http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Answer 2

如 Marke 所说，但如果您想控制 FPS，请将您的 requestAnimationFrame 调用包装在 setTimeOur 函数中，如下所示：

var fps = 15;
function draw() {
    setTimeout(function() {
        requestAnimationFrame(draw);
        // Drawing code goes here
    }, 1000 / fps);
}

使用 requestAnimationFrame 是个好主意，即使您正在修复帧速率，因为它

1. 将在页面处于非活动状态时提供 CPU 节流 a
2. 为您提供 requestAnimationFrame 提供的幕后优化。

Request Animation Frame 的一个不错的页面可以找到here。