requestAnimationFrame初探

一直以来都是用css3来实现动画效果，一个是性能问题，第二个是js实现总不如css3流畅，可是最近发现了一个新大陆：requestAnimationFrame

requestAnimationFrame是什么？
requestAnimationFrame()函数就是针对动画效果的API，你能够把它用在DOM上的风格变化或画布动画或WebGL中

requestAnimationFrame有什么好处？
浏览器能够优化并行的动画动做，更合理的从新排列动做序列，并把可以合并的动做放在一个渲染周期内完成，从而呈现出更流畅的动画效果。好比，经过requestAnimationFrame()，JS动画可以和CSS动画/变换或SVG SMIL动画同步发生。另外，若是在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减小CPU，内存的压力，节省电池电量。

封装后的JS：判断使用4ms仍是16ms的延迟，来最佳匹配60fps

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // name has changed in Webkit
                                      window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (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);
        };
    }
}());

demo：向上滚动

function funscroll(){
        var scroll = $("#info-position").css("top");
        if( scroll>-395){
            scroll-=5;
        }
        $("#info-position").css("top",scroll+"px");
       requestAnimationFrame(funscroll); 
    }

　　

各类浏览器对requestAnimationFrame的支持状况

谷歌浏览器，火狐浏览器，IE10+都实现了这个函数，即便你的浏览器很古老，上面的对requestAnimationFrame封装也能让这个方法在IE8/9上不出错。