requestAnimationFrame动画方法

Posted 2020-08-27 世界之魂

一、动画方式

在html5/CSS3时代，实现动画的方式有许多种：

你可以用css3的animation和@keyframes；

可以用css3的transition；

还可以用原始的setTimeout()、setInterval()达到动画效果，以及jQuery中animate方法；

今天我们要介绍是另一种动画方式：requestAnimationFrame(callback)！

二、基本语法

可以直接调用，也可以通过window来调用，接收一个函数作为回调，返回一个ID值：

ID=requestAnimationFrame(callback)//callback为回调函数

requestAnimationFrame的用法和setTimeout()类似都是单回调，其优势在于跟着浏览器的绘制走。相当一部分的浏览器的显示频率是16.7ms，即1s绘制60次。如果间隔时间小于16.7ms动画就会卡顿，而requestAnimationFrame就是在浏览器绘制是调用动画！总结requestAnimationFrame的优势如下：

1.跟着浏览器的绘制走，动画更流畅；

2.页面最小化了，或者被Tab切换关灯了，页面绘制全部停止，资源高效利用；

3.更省电，尤其是对移动终端。

如果想停止动画调用，方法如下：

cancelAnimationFrame(ID);

三、兼容情况

android设备压根就不支持嘛！其他设备基本上跟CSS3动画的支持一模一样。

如果需要简单兼容，可这么写：

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

但是呢，并不是所有设备的绘制时间间隔是1000/60 ms, 以及上面并木有cancel相关方法，所以，就有下面这份更全面的兼容方法：

(function() {
    var lastTime = 0;
    var vendors = [\'ms\', \'moz\', \'webkit\', \'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);
    };
}());

然后我们就能像使用setTimeout一样来使用requestAnimationFrame了！