requestAnimationFrame原理和用法浅析

为什么80%的码农都做不了架构师？>>>   

 开始之前要介绍两个概念：

· 页面可见

        当页面被最小化或者被切换成后台标签页时，页面为不可见，浏览器会触发一个 visibilitychange事件,并设置document.hidden属性为true；切换到显示状态时，页面为可见，也同样触发一个 visibilitychange事件，设置document.hidden属性为false。

· 动画帧请求回调函数列表

        每个Document都有一个动画帧请求回调函数列表，该列表可以看成是由< handle, callback>元组组成的集合。其中handle是一个整数，唯一地标识了元组在列表中的位置；callback回掉函数，形参为一个时间值的函数（该时间值为动画函数每次开始执行距离第一次执行的毫秒数）。

正餐开始：

写法：Handle=requestanimatonframerequest(函数名);

        1).传入一个函数名，自然就是要一直跑啊跑的动画函数了;

        2).这个handle返回值可是很重要的，他接着的可是动画函数的灵魂！

         该值为浏览器定义的、大于0的整数，唯一标识了该回调函数在列表中位置。

简单点的浏览器执行过程:

        看过不少网上写的原理，完整点的要看很久才看明白，今天就给看官们更新个新手简化版本（买手抓饼版本）： requestAnimationFrame方法，总结起来，每次调用这个方法时会简单的发生两件事（浏览器处理过程）如下：

            1.首先要判断document.hidden属性是否为true,就是浏览器开着才会执行。就像是手抓饼店开着才能去抓。

    2.浏览器会清空上一轮的动画函数，这个怎么理解呢？就是说Handle=requestanimatonframerequest(函数名);这一句话调用一次后就被浏览器吃掉了。恩，挺对的，手抓饼吃一次就没了，再想吃要再去买。

            3.这个方法返回的handle值会和动画函数，以这样的方式:< handle, callback>  进入到----动画帧请求回调函数列；

            4.浏览器会遍历动画帧请求回调函数列表，根据handel的值大小，依次去执行相应的动画函数；(这里还有个小前提，马上将到).这个过程就像是排队买手抓饼（我们学校的手抓饼阿姨会先给排队的人每人一个袋子，先拿到袋子的先拿饼）

所以，正确的requestanimatonframerequest其实应该是不断的递归。

如下：

function animate(time) {
        //这里写的语句会不断重复
        console.log("买手抓饼");
        id = window.requestAnimationFrame(animate);
    }
    animate();

 

补充删掉动画函数的操作:

    每天都控制不住去买手抓饼怎么办，答案是：钱用完了就不去了。

同样的，来看上文提到的小前提：

每个回调函数都有一个布尔标识cancelled，该标识初始值为false

浏览器在执行“采样所有动画”的任务时会遍历动画帧请求回调函数列表，判断每个元组的callback的cancelled，如果为false，则执行callback，此时才能看到动画效果啦~~~

(canaelled=你Y的是不是没钱，false=不是的不是的)--》诺，饼给你！

(非常吐槽，为什么要这么虐心，非要cancel+false， 歪果仁很喜欢负负得正啊)

用法:cancelAnimationFrame(要删除的handle);

最后一个小问题，既然传入的参数并不是控制时间间隔的，那么怎么做到像setInterval一样的效果呢？  用时间去判断吧~~

var timeOne=Date.now();  //起始时间1
    function animate(time) {
        console.log(time);  //这个time 是每次进入执行动画经过的毫秒数
        var timeTwo = Date.now();  //起始时间1
        if (timeTwo - timeOne >=1000) {  //差值就是中间暂停的时间啦（消化手抓饼）
            me.innerHTML = '我是' + number + '只小青龙';
            number++;
            timeOne = timeTwo;
        }
        id = requestAnimationFrame(animate);
    }
    animate();

 终于，终于，终于，写完了。。。。吃手抓饼去！！！

转载于:https://my.oschina.net/bghead/blog/850692