https://blog.csdn.net/w2765006513/article/details/53843169

window.requestAnimationFrame()的使用

2016年12月23日 19:38:38 逆光2016 阅读数：10179 标签：动画函数源码更多

个人分类： js

1.前言

在说明这个js的api用法之前，我先给个效果以及源码：
1. 页面效果
2. 页面源码

2.说明

window.requestAnimationFrame()这个API是浏览器提供的js全局方法，针对动画效果。

1）使用

用法1：

function animate() { 
  //done();
  requestAnimationFrame(animate); 
} 
requestAnimationFrame(animate);

注意函数里的requestAnimationFrame(animate)
有了这句话，就形成了递归调用，设置应为这个函数多用在持续的动画中，可以自由处理要不要这句话。
2. 用法2：

var globalID; 
function animate() { 
  // done(); 一直运行
  globalID=requestAnimationFrame(animate); 
  // Do something animate 
} 
globalID=requestAnimationFrame(animate);//开始
cancelAnimationFrame(globalID);//结束

2）优点：

浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。

经过浏览器优化，动画更流畅；
窗口没激活时，动画将停止，省计算资源;

3) 使用场景：

可以调节重新渲染，大幅提高网页性能。其中最重要的，它可以将某些代码放到下一次重新渲染时执行。避免短时间内触发大量reflow。

function doubleHeight(element) {
  var currentHeight = element.clientHeight;
  window.requestAnimationFrame(function () {
    element.style.height = (currentHeight * 2) + 'px';
  });
}
elements.forEach(doubleHeight);

页面滚动事件（scroll）的监听函数，就很适合用这个api,推迟到下一次重新渲染。

$(window).on('scroll', function() {
   window.requestAnimationFrame(scrollHandler);
});

最佳的应用场景还是在帧动画里，可以大幅优化性能；

4）兼容性支持

为了避免老浏览器没有提供这个api，可以先检测，后处理，没有提供api时，写对应的函数挂在window下，以后的调用与正常情况一致。
网上大神的杰作

(function() {
    var lastTime = 0; var vendors = ['webkit', 'moz']; 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) { 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.
利用setTimeout和clearTimeout的异步实现相应的功能，不是为一种很好的结局方案。
如果对异步有疑问，可以查看我的另一篇博客js的执行机制

window.requestAnimationFrame()的使用,处理更流畅的动画效果