## 基础动画 实现动画,我们首先想到的肯定是`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> ```