JS动画requestAnimationFrame

requestAnimationFrame,H5新出的方法

 requestAnimationFrame函数,参数是一个函数,效果是在浏览器下一次刷新帧时调用这个函数

浏览器对于页面的刷新频率是 每秒60次,相当于大约17毫秒一次.(当计算机资源不足时,可能会导致刷新率降低)

function f2(){
    console.log("帧刷新了");
    timer = requestAnimationFrame(f2);
}
// 定义一个变量接收,以便于停止
var timer = requestAnimationFrame(f2);

浏览器一直在刷新帧,所以会一直输出,每秒60次左右,受计算机资源影响,可以设置一个延时器来看一秒输出了多少次:

setTimeout(function(){
        // 清除requsetAnimationFrame
        cancelAnimationFrame(timer);
    },1000)

requesAnimationFrame,是H5中新增的webApi,专门用于实现js动画

相比使用setInterval,requestAnimationFrame实现的动画更加流畅,而且系统资源不足时,不会出现丢帧(资源不足动画可能会变慢,但不会丢帧)