HTML5 : requestAnimationframe API

requestAnimationFrame()

专门用于处理动画的API

1.页面刷新前执行一次（1000ms/60fps ，大约16ms每帧）使得动画更流畅，
2.标签页不可见时，暂停动画，减少对CPU和GPU的占用。
2.用法和 setTimeout 类似
3.匹配的取消API：cnacelAnimationFram()
4.兼容性:IE10 以上浏览器，解决方式，优雅降级

封装兼容性函数

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

window.cancelAnimFrame = (function(){
    return window.cancelAnimationFrame ||
           window.webkitCancelAnimationFrame ||
           window.mozCancelAnimationFrame ||
           function(id){
               window.clearTimeout(id);
           }
}())

应用

var div = document.getElementsByTagName('div')[0];
//var timer = null;
var req;

function move(){
    div.style.left = div.offsetLeft + 10 + "px";
    if(div.offsetLeft >= 500){
        //clearTimeout(timer);
        cancelAnimFrame(req);
        div.style.left = 500 + 'px';
    }else{
        // timer = setTimeout(function(){
        //     move();
        // },1000/60);
        req = requestAnimFrame(move);
    }
}
move();