基础动画

实现动画，我们首先想到的肯定是setTimeout和setInterval，这两个在这里就不细说了。

除了这两个外，我们还可以使用requestAnimationFrame()这个方法。

requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API

requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。

注意: 如果想得到连贯的逐帧动画，函数中必须重新调用 requestAnimationFrame()。

如果你想做逐帧动画的时候，你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动作。通常来说，被调用的频率是每秒60次，但是一般会遵循W3C标准规定的频率。如果是后台标签页面，重绘频率则会大大降低。

回调函数只会被传入一个DOMHighResTimeStamp参数，这个参数指示当前被 requestAnimationFrame 序列化的函数队列被触发的时间。因为很多个函数在这一帧被执行，所以每个函数都将被传入一个相同的时间戳，尽管经过了之前很多的计算工作。这个数值是一个小数，单位毫秒，精确度在 10 µs。

参数 callback 在每次需要重新绘制动画时,会调用这个参数所指定的函数。这个回调函数会收到一个参数，这个 DOMHighResTimeStamp 类型的参数指示当前时间距离开始触发 requestAnimationFrame 的回调的时间。 返回值 requestID 是一个长整型非零值,作为一个唯一的标识符.你可以将该值作为参数传给 cancelAnimationFrame() 来取消这个回调函数。

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

 if (!window.cancelAnimationFrame) {
      window.cancelAnimationFrame = (window.cancelRequestAnimationFrame ||
                                     window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame ||
                                     window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame ||
                                     window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame ||
                                     window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame ||
                                     window.clearTimeout);
    }

实例：canvas-demo/requestAnimationFrame.html：

<canvas id="canvas" width="600" height="400">
		不支持canvas
	</canvas>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = "";
        ctx = canvas.getContext("2d");
		
		var dirt = 0;
		var vx = 3;
	
		gameStart();
        function gameStart() {
        	ctx.clearRect(0, 0, 600, 400);
        	if (dirt + 50 >= canvas.width || dirt < 0) {
        		vx = -vx;
        	} 
        	dirt = dirt + vx;
        	ctx.fillRect(dirt, 0, 50, 50);
        	requestAnimationFrame(gameStart);
        }
	</script>