HTML5 requestAnimationFrame的使用

<p>
</p>

在编写HTML小游戏的适时候，基本都有动画的处理。通常情况使用setInterval和setTimeout来实现动画也是可行的，但是浏览器厂商早就已经提出了一个新的API requestAnimationFrame专门用来进行动画的处理。这个API的优势在于

1、将动画代码优化到一个回流-重绘的循环中去，使动画更流畅。

2、标签页不可见时，暂停动画，减少对CPU和GPU的占用。

3、在不支持的更高帧频的机器上自动限制帧频，在有能力以较高帧频运行的机器上提高帧频。

有点这么多，但是这里又遇到一个web开发避不开的问题，多浏览器兼用问题。下面给上我编写一个小游戏时候用来兼容的代码。虽然很多书本上都有。但是写在这里方便自己记忆也方便大家。

   (function(){
        var lastTime = 0;
        var prefixes = ['ms','webkit','o','moz']; //各浏览器前缀

        var requestAnimationFrame = window.requestAnimationFrame;
        var cancelAnimationFrame = window.cancelAnimationFrame;

        var prefix;
        //通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
        for( var i = 0; i < prefixes.length; i++ ) {
            if ( requestAnimationFrame && cancelAnimationFrame ) {
                break;
            }
            prefix = prefixes[i];
            requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ];
            cancelAnimationFrame  = cancelAnimationFrame  || window[ prefix + 'CancelAnimationFrame' ] || window[ prefix + 'CancelRequestAnimationFrame' ];
        }

        //如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
        if ( !requestAnimationFrame || !cancelAnimationFrame ) {
            requestAnimationFrame = function( callback, element ) {
                var currTime = new Date().getTime();
                //为了使setTimteout的尽可能的接近每秒60帧的效果
                var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
                var id = window.setTimeout( function() {
                    callback( currTime + timeToCall );
                }, timeToCall );
                lastTime = currTime + timeToCall;
                return id;
            };
            cancelAnimationFrame = function( id ) {
                window.clearTimeout( id );
            };
        }

        window.requestAnimationFrame = requestAnimationFrame;
        window.cancelAnimationFrame = cancelAnimationFrame;
    }());

 window.requestAnimationFrame = requestAnimationFrame;
  window.cancelAnimationFrame = cancelAnimationFrame;

这2句不能遗漏。否则会不起作用