这个HTML5游戏第二关移动的的小陷阱，使用的是setTimeout还是requestAnimFrame?

Question

这个HTML5游戏第二关移动的的小陷阱，使用的是setTimeout定时器移动
还是requestAnimFrame+new Date()设置间隔刷新+移动?
我该选择什么？

http://yx8.com/game/xiaojiang...

Answer 1

题外：

在一个成熟的Canvas框架中（egret、cocos2d），应该是避免使用这两个函数的。
因为这些框架本身就依靠setInterval来刷新FPS，因此它们内部都有相应的Timer实现函数（比如：egret的Tween），再比如jQuery也有animate函数一样。在Canvas中比较特殊，因为它本身就是一个大的setInterval，因此在实现Tween时，会借助自己的主setInterval来做Sprite的运动(具体原理欢迎开贴讨论)，从而降低了setInterval的对CPU的利用率。

答案：
在能使用Canvas的场景，requestAnimationFrame函数肯定是有效函数，requestAnimationFrame理论上刷新是 60 FPS
我看你那个动画很简单，使用setInterval和requestAnimationFrame都对系统不会有太大的压力。

个人建议：requestAnimationFrame

相应的Polyfill代码：

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }
    if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() {
            callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };
    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}());