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

2022-11-02 09:58:53

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的执行机制

码农公寓