window.requestAnimationFrame()

keRee 最后编辑于

window.requestAnimationFrame()是个啥？

window.requestAnimationFrame()方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法将在重绘之前调用的回调作为参数。

看出来了吧，就是为我们提供了一个执行动画的方法！
那我们为什么要用做个执行动画呢？

首先我们要说下显示器，因为一般显示器大约是16.7ms的刷新频率，也就是大概1s钟60次；
那么 requestAnimationFrame方法通过在系统准备好绘制动画帧时调用该帧，从而为创建动画网页提供了一种更平滑更高效的方法；
也就是说requestAnimationFrame方法的频率与显示器刷新频率大概相同；

在此 API 之前，使用 setTimeout 和 setInterval 绘制的动画并没有为 Web 开发人员提供有效的方法来规划动画的图形计时器。这导致了动画过度绘制，浪费 CPU 周期以及消耗额外的电能等问题。而且，即使看不到网站，特别是当网站使用背景选项卡中的页面或浏览器已最小化时，动画都会频繁出现。而requestAnimationFrame方法在不在当前选项卡或者浏览器最小化时会停止动画，从而可以更好地节约系统资源。

使用方法（语法）

1
requestID = window.requestAnimationFrame(callback);

参数callback
在每次需要重新绘制动画时,会调用这个参数所指定的函数。这个回调函数会收到一个参数，这个 DOMHighResTimeStamp 类型的参数指示当前时间距离开始触发 requestAnimationFrame 的回调的时间

也就是说callback函数在在执行时可以自动获得一个参数timestamp
timestamp表示当前时间距离开始触发 requestAnimationFrame 的回调的时间

返回值

requestID 是一个长整型非零值,作为一个唯一的标识符.你可以将该值作为参数传给
window.cancelAnimationFrame() 来取消这个回调函数。

兼容性

目前移动端的是不兼容的，而PC上也得做兼容处理；
代码请看这里：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var lastTime = 0;
var vendors = ['webkit', 'moz', 'ms', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame =
      window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (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);
    };
}

这里的处理是如果支持就使用window.requestAnimationFrame()方法，如果不支持则退为使用window.setTimeout()方法