requestAnimationFrame动画辅助方法概述

通常来浏览器中实现动画，我们都使用setTimeout来每隔一段时间修改需要动画的属性，例如，修改指定元素颜色或者位置等等

和setTimeout方法等待特定时间后开始操作不一样，requestAnimationFrame会在下一次浏览器进行操作的时候调用对应的callback，如下：

window.requestAnimationFrame(callbackFunction);

这样的好处在于能够在浏览器的绘制周期中准确的绘制图形，因此动画更加顺畅和平滑，而且不会太依赖CPU命令执行

浏览器兼容性

requestAnimationFrame在Firefox4中被引入，并且被所有浏览器广泛支持包括了IE10，而且针对老浏览器的向前兼容也非常容易

目前不同浏览器或者不同版本浏览器支持的requestAnimationFrame前缀不同，这里我们使用如下代码保证对于requestAnimationFrame的兼容性：

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

以上代码中，将支持firefox，chrome，opera，IE等浏览器，如果比较老的浏览器不支持requestAnimationFrame的话，则fallback方式使用setTimeou来实现动画

相关演示

使用requestAnimFrame实现一个画布动画效果：生成画布图形

首先介绍如何使用HTML5画布生成基础图形，定义HTML的canvas元素，如下：

<canvaswidth="300"height="300"id="mycanvas"></canvas>

获取画布上下文，代码如下：

varcanvas=document.getElementById('mycanvas');varctx=canvas.getContext("2d");

使用上下文ctx我们可以在画布中生成图形，创建如下方法：

functiondrawCharactor(x,y,bgcolor,strokescolor){ctx.fillStyle="#"+bgcolor;ctx.fillRect(x,y,25,25);ctx.fill();ctx.strokeStyle="#"+strokescolor;ctx.strokeRect(x,y,25,25);}

以上方法生成一个矩形，其中矩形填充颜色为bgcolor，生成矩形方法为fillRect，并且使用方法strokeRect添加描边效果，使用strokeStyle属性定义描边颜色

相关演示

使用requestAnimFrame实现一个画布动画效果：添加动画效果

上节学习了绘制一个静态图形，本节将介绍如何使用requestAnimFrame生成图形动画

首先定义一个基础的requestAnimFrame动画方法，如下：

varanimate=function(){......requestAnimationFrame(animate);}

在上面代码中，我们使用requestAnimationFrame自调用animate方法，生成动画所需的循环调用

在animate方法中，使用上节定义的drawCharactor方法动态的绘制图形，注意需要使用HTML5画布的清除方法来清除图形，并且调用drawCharactor重新绘制图形，这样生成一个图形的动画效果，如下：

varanimate=function(){x+=1,y+=1;//动态定义图形坐标位置ctx.clearRect(0,0,canvaswidth,canvasheight);//清除画布中的所有图形，以便再次绘制图形drawCharactor(x,y,'dd4814','999999');//绘制图形requestAnimationFrame(animate);}

使用以上代码即可生成一个移动的正方形效果

请点击“下一步：播放”详细查看代码书写过程和运行效果 （请注释掉最终生成代码的clearRect方法尝试区别）

相关演示

课程地址：http://www.gbtags.com/gb/share/4910.htm