requestAnimationFrame用法

    在Web应用中，实现动画效果的方法比较多，Javascript 中能够经过定时器 setTimeout 来实现，css3 可使用 transition 和 animation 来实现，html5 中的 canvas 也能够实现。除此以外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。 

1、相关概念

为了理解 requestAnimationFrame 背后的原理，咱们首先须要了解一下与之相关的几个概念：

1.  页面可见

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

2.  动画帧请求回调函数列表

    每一个Document都有一个动画帧请求回调函数列表，该列表能够当作是由<handlerId, callback>元组组成的集合。其中handlerId是一个整数，惟一地标识了元组在列表中的位置；callback是回调函数。

3.  屏幕刷新频率

    即图像在屏幕上更新的速度，也即屏幕上的图像每秒钟出现的次数，它的单位是赫兹(Hz)。 对于通常笔记本电脑，这个频率大概是60Hz， 这个值的设定受屏幕分辨率、屏幕尺寸和显卡的影响。

4.  动画原理

    根据上面的原理咱们知道，你眼前所看到图像正在以每秒60次的频率刷新，因为刷新频率很高，所以你感受不到它在刷新。而动画本质就是要让人眼看到图像被刷新而引发变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡。 那怎么样才能作到这种效果呢？

    刷新频率为60Hz的屏幕每16.7ms刷新一次，咱们在屏幕每次刷新前，将图像的位置向左移动一个像素，即1px。这样一来，屏幕每次刷出来的图像位置都比前一个要差1px，所以你会看到图像在移动；因为咱们人眼的视觉停留效应，当前位置的图像停留在大脑的印象还没消失，紧接着图像又被移到了下一个位置，所以你才会看到图像在流畅的移动，这就是视觉效果上造成的动画。

2、 requestAnimationFrame用法

异步，传入的函数在重绘以前调用。

1.  写法：handlerId = requestAnimationFrame(callback)

(1)  传入一个callback函数，即动画函数;

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

2.  浏览器执行过程:

(1)  首先要判断document.hidden属性是否为true,即页面处于可见状态下才会执行；

(2)  浏览器清空上一轮的动画函数；

(3)  这个方法返回的handlerId 值会和动画函数callback，以<handlerId , callback> 进入到动画帧请求回调函数列；

(4)  浏览器会遍历动画帧请求回调函数列表，根据handlerId 的值大小，依次去执行相应的动画函数。

3.  取消动画函数的方法：

cancelAnimationFrame(handlerId)复制代码

3、setTimeout与requestAnimationFrame

1.  setTimeout

    理解了上面的概念之后，咱们不难发现，setTimeout 其实就是经过设置一个间隔时间来不断的改变图像的位置，从而达到动画效果的。但利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个缘由：

• setTimeout的执行时间并非肯定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完之后，才会去检查该队列里的任务是否须要开始执行，所以 setTimeout 的实际执行时间通常要比其设定的时间晚一些。
• 刷新频率受屏幕分辨率和屏幕尺寸的影响，所以不一样设备的屏幕刷新频率可能会不一样，而 setTimeout只能设置一个固定的时间间隔，这个时间不必定和屏幕的刷新时间相同。

以上两种状况都会致使setTimeout的执行步调和屏幕的刷新步调不一致，从而引发丢帧现象。 那为何步调不一致就会引发丢帧呢？

首先要明白，setTimeout的执行只是在内存中对图像属性进行改变，这个变化必需要等到屏幕下次刷新时才会被更新到屏幕上。若是二者的步调不一致，就可能会致使中间某一帧的操做被跨越过去，而直接更新下一帧的图像。假设屏幕每隔16.7ms刷新一次，而setTimeout每隔10ms设置图像向左移动1px， 就会出现以下绘制过程：

• 第0ms:  屏幕未刷新，等待中，setTimeout也未执行，等待中；
• 第10ms:  屏幕未刷新，等待中，setTimeout开始执行并设置图像属性left=1px；
• 第16.7ms:  屏幕开始刷新，屏幕上的图像向左移动了1px， setTimeout 未执行，继续等待中；
• 第20ms:  屏幕未刷新，等待中，setTimeout开始执行并设置left=2px;
• 第30ms:  屏幕未刷新，等待中，setTimeout开始执行并设置left=3px;
• 第33.4ms: 屏幕开始刷新，屏幕上的图像向左移动了3px， setTimeout未执行，继续等待中；
• …

从上面的绘制过程当中能够看出，屏幕没有更新left=2px的那一帧画面，图像直接从1px的位置跳到了3px的的位置，这就是丢帧现象，这种现象就会引发动画卡顿。

2.  requestAnimationFrame

与setTimeout相比，requestAnimationFrame最大的优点是由系统来决定回调函数的执行时机。具体一点讲，若是屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，若是刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引发丢帧现象，也不会致使动画出现卡顿的问题。

这个API的调用很简单，以下所示：

var progress = 0;
//回调函数
function render() {  
  progress += 1; //修改图像的位置 
  if (progress < 100) {  //在动画没有结束前，递归渲染 
    window.requestAnimationFrame(render); 
  }
}
//第一帧渲染
window.requestAnimationFrame(render);复制代码

除此以外，requestAnimationFrame还有如下两个优点：

• CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，因为此时页面处于不可见或不可用状态，刷新动画是没有意义的，彻底是浪费CPU资源。而requestAnimationFrame则彻底不一样，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，所以跟着系统步伐走的requestAnimationFrame也会中止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。

• 函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生屡次函数执行，使用requestAnimationFrame可保证每一个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个刷新间隔内函数执行屡次时没有意义的，由于显示器每16.7ms刷新一次，屡次绘制并不会在屏幕上体现出来。

3.  优雅降级

    因为requestAnimationFrame目前还存在兼容性问题，并且不一样的浏览器还须要带不一样的前缀。所以须要经过优雅降级的方式对requestAnimationFrame进行封装，优先使用高级特性，而后再根据不一样浏览器的状况进行回退，直至只能使用setTimeout的状况。下面的代码就是有人在github上提供的polyfill，详细介绍请参考github代码 requestAnimationFrame。

if (!Date.now)
    Date.now = function() { return new Date().getTime(); };
 
(function() {
 'use strict';
     
    var vendors = ['webkit', 'moz'];
    for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
        var vp = vendors[i];
        window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
        window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
                                   || window[vp+'CancelRequestAnimationFrame']);
    }
    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
        var lastTime = 0;
        window.requestAnimationFrame = function(callback) {
            var now = Date.now();
            var nextTime = Math.max(lastTime + 16, now);
            return setTimeout(function() { callback(lastTime = nextTime); },
                              nextTime - now);
        };
        window.cancelAnimationFrame = clearTimeout;
    }
}());
复制代码

（文章纯属我的备忘记录用途，部分引用来自网上加上我的理解整理。欢迎转载，请注明出处。如对你有帮助，请随意打赏。）