HTML5 Canvas 教程 2.4.2 使用 requestAnimationFrame 方法创建动画

最新推荐文章于 2024-06-21 08:42:30 发布

abxn2002

最新推荐文章于 2024-06-21 08:42:30 发布

阅读量2k

点赞数

分类专栏： javascript学习笔记文章标签： html5 callback function 浏览器 firefox opera

javascript学习笔记专栏收录该内容

75 篇文章 0 订阅

订阅专栏

转载地址: http://iysm.net/?p=351

英文原版：http://www.html5canvastutorials.com/advanced/html5-canvas-animation-stage/
2.4.2 使用 requestAnimationFrame 方法创建动画
如果要用 HTML5 的 canvas 创建动画，那么就需要用到 requestAnimationFrame 方法，这个方法能够使浏览器智能的判断帧率 FPS ，而且对于动画的每一帧我们都可以进行更新、清除 canvas 、重画 canvas，然后申请下一帧动画。
译者注：在这里，动画的帧率跟你的机器硬件、浏览器软件的具体情况有一定关系，一般来说流畅的动画帧率在40FPS到60FPS之间。那么，对于程序员来说，很难判断应该针对每一个具体的用户使用多大的帧率，因此，各大浏览器都为我们提供了一个 windows.requestAnimationFrame 方法来自动的判断具体的帧率，这就给程序员省去了很多麻烦。
这个 requestAnimationFrame 方法接受一个由用户自定义的回调函数对象作为参数， requestAnimationFrame 将在当前帧完成后自动调用这个回调函数，而我们要做的就是在这个回调函数中进行我们的下一帧图像绘制操作，并在此回调函数最后再次调用 requestAnimationFrame 方法，使动画一帧帧的连续绘制下去。
比如说，我们的绘图方法叫做 animate，将此方法注册为windows.onload方法，每次页面调用就启动此方法，每次调用 animate 就在 canvas 绘制当前时间应该显示的那一帧图像，并在 animate 结尾返回之前，以其自身，也就是以 animate 为回调函数参数调用 requestAnimationFrame，由 requestAnimationFrame 自动再次调用 animate 绘制下一帧图像。
这个基本的流程可以参见下图：

不过，由于不同的浏览器对 requestAnimationFrame 的支持程度不同，所以，是使用的时候一般要稍作调整，通过对 requestAnimationFrame 的再封装提高程序对不同浏览器的兼容度。具体可以声明一个如下的 requestAnimFrame 方法来替代requestAnimationFrame（注意名字不同）：

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

上面代码中的 webkitRequestAnimationFrame、 mozRequestAnimationFrame、 oRequestAnimationFrame 和 msRequestAnimationFrame 分别是兼容 Chrome、 Firefox、 Opera 和 IE。
这样，在animate 的最后只要添加如下一行就可以了。

requestAnimFrame(function() { animate(); });

比较完整的实现方法参见下面的代码。至于animate中如何确定当前具体应该是哪一帧图像，可以参见下一节的内容。

代码

window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();
 
function animate(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    // 更新图像
 
    // 清屏
    context.clearRect(0, 0, canvas.width, canvas.height);
 
    // 绘制当前帧
 
    // 请求绘制下一帧
    requestAnimFrame(function(){
        animate();
    });
}
 
window.onload = function(){
    // 初始化
 
    animate();
};