使用requestAnimationFrame()优化JavaScript动画性能

在JavaScript里曾经只有一种方法来设定定时循环任务：setInterval()。如果你想快速的重复有些动作(但又不是像直接调用for循环那样立即执行)，你就需要用到定时调度。最常见的就是动画绘制过程，当动画的绘制速度达到每秒钟60帧时，动画会显得非常的流畅，于是，你需要允许像下面这样一个定时循环任务：

setInterval(function() {
  // 做某些动画任务
}, 1000/60);

但现在有了一个新的、性能更好的方法可以实现这个任务。之前我们曾讲过requestAnimationFrame() 这个方法。那篇文章里是一个系统的介绍，今天将在这里举2个实际例子和用法。

为什么requestAnimationFrame()更好？

• 浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。
• 在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减少CPU，内存的压力，节省电池电量。

最简单的一个使用requestAnimationFrame()的例子

function repeatOften() {
  // 做某些事情
  requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);

这个方法一旦启动，它就会递归的调用自己。

启动和停止

requestAnimationFrame 函数能返回一个ID，根据这个ID，你可以停止它的允许，这就像 setTimeout 和 setInterval 的用法一样。下面是一个实际可运行的例子：

var globalID;

function repeatOften() {
  document.getElementsByTagName("body").appendChild('#');;
  globalID = requestAnimationFrame(repeatOften);
}

$("#start").on("click", function() {
  globalID = requestAnimationFrame(repeatOften);
});

$("#stop").on("click", function() {
  cancelAnimationFrame(globalID);
});

运行效果是这样的：

不要用低于IE9的浏览器观看此演示，你懂得！

一个稍微复杂的使用requestAnimationFrame()的例子

事实上，在使用 canvas 绘画时这样这个函数会更加适合，能获得更好的结果:

这个演示的复杂在于好几种动画的同时发生。

JavaScript代码

var snake = {
  
  canvas: document.getElementById("canvas"),
  ctx: document.getElementById("canvas").getContext('2d'),
  
  // how big the "squares" will be
  xDis: 0,
  yDis: 0,
  
  // where the square will be drawn
  posX: 0,   
  posY: 0,
  
  repeater: 0, // ID of requestAnimationFrame
    
  divisions: 30, // breaks frame into X × X squares

  init: function() {
    
    // Set up "Two Dimensional" Array to remember what is on and off
    this.memory = new Array(this.divisions-1);
    for (var i = 0; i < (this.divisions+1); i++) {
      this.memory[i] = new Array(this.divisions-1);
    }
 
    // Size the canvas appropriately
    var width = window.innerWidth;
    var height = window.innerHeight;
    snake.canvas.width = width;
    snake.canvas.height = height;
    
    // Size of squares is canvas width broken into equal chunks
    snake.xDis = width/snake.divisions;
    snake.yDis = height/snake.divisions;
                
    // All pink, baby
    this.ctx.fillStyle = "#EA80B0";
  
    // Random starting position
    this.posX = Math.floor(Math.random() * this.divisions);
    this.posY = Math.floor(Math.random() * this.divisions);
    
    // global
    drawLoop = function() {
      snake.repeater = requestAnimationFrame(drawLoop);
      snake.oneMovement();
    }
    drawLoop();
        
  },
  
  drawSquare: function(x, y) {
    // Actually draw it
    snake.ctx.fillRect(x*this.xDis, y*this.yDis, this.xDis, this.yDis);
    
    // Record it in memory
    snake.memory[x][y] = true;
  },
  
  checkPossiblePositions: function() {
  
    var posToReturn = [];
    
    if (this.posX == 0) {
      // can't go left
    } else if (this.memory[this.posX-1][this.posY] == true) {
      // left occupied
    } else {
      posToReturn.push("left");
    }
    
    if (this.posX == this.divisions) {
      // can't go right
    } else if (this.memory[this.posX+1][this.posY] == true) {
      // right occupied
    } else {
      posToReturn.push("right");
    }
    
    if (this.posY == 0) {
      // can't go up
    } else if (this.memory[this.posX][this.posY-1] == true) {
      // top occupied
    } else {
      posToReturn.push("up");
    }
    
    if (this.posY == this.divisions) {
      // can't go down
    } else if (this.memory[this.posX][this.posY+1] == true) {
      // bottom occupied
    } else {
      posToReturn.push("down");
    }
          
    return posToReturn;
    
  },
  
  startNewRound: function() {
    // Stop! 
    cancelAnimationFrame(this.repeater);
    
    // Find new spot
    var newSpot = this.findEmpty();
            
    if (newSpot == "nope") {
      
      // Absolutely done, start over.
      
      // clear canvas
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      
      // start over
      this.init();
      
    } else {
      
      // Start over from new position
      this.posX = newSpot[0];
      this.posY = newSpot[1];

      // Actually restart      
      drawLoop();
      
    }
  },
  
  oneMovement: function() {
    
    this.drawSquare(this.posX, this.posY);
        
    var possiblePos = this.checkPossiblePositions();
      
    var numPossible = possiblePos.length;
      
    if (numPossible == 0) {
      
      this.startNewRound();
      
    } else {
      
      var randomDir = Math.floor(Math.random() * numPossible);
      
      if (possiblePos[randomDir] == "left") {
        this.posX--; 
      }
      if (possiblePos[randomDir] == "right") {
        this.posX++; 
      }
      if (possiblePos[randomDir] == "up") {
        this.posY--; 
      }
      if (possiblePos[randomDir] == "down") {
        this.posY++;
      }
      
    }
    
  },
  
  findEmpty: function() {
    
    for (var x = 0; x < (this.divisions+1); x++) {
      for (var y = 0; y < (this.divisions+1); y++) {      
        if (!this.memory[x][y]) {
           return [x, y]; 
        }
      }
    } 
    
    return "nope";
    
  }
 
}

// need this loop to make sure canvas sizes right on CodePen
setTimeout(function() {
  
  snake.init();
  
}, 10);