[练习] requestAnimationFrame的使用

秒速五厘米 2022-02-14 01:18 179阅读 0赞

以往JS控制的动画大多使用`setInterval` 或者`setTimeout` 每隔一段时间刷新元素的位置，来达到动画的效果，但是这种方式并不能准确地控制动画帧率，尽管主流的浏览器对于这两个函数实现的动画都有一定的优化，但是这依然无法弥补它们性能问题。主要原因是因为JavaScript的单线程机制使得其可能在有阻塞的情况下无法精确到毫秒触发。

`requestAnimationFrame()`方法正是为了满足高性能动画的需求而提供的API，通过`setInterval`方法控制的动画其调用的间隔由程序员设置，而`requestAnimationFrame()`无须设置调用间隔， 它自动紧跟浏览器的绘制的帧率（一般浏览器的显示帧率是60fps，差不多每帧间隔16.7ms）

关于过去的`setInterval`控制的动画与`requestAnimationFrame()`的效果的对比，这里引用‘艾伦’的帖子中的栗子。原帖地址?[动画requestAnimationFrame][requestAnimationFrame]

[setInterval动画DEMO][setInterval_DEMO]  
[requestAnimationFrame动画DEMO][requestAnimationFrame_DEMO]

点击预览以上两个demo可以明显感受到前者有点卡顿，后者更为流畅。

另外`requestAnimationFrame()`在隐藏或不可见的元素中将不会进行重绘或回流，大大降低了开销。关于该方法的其他细节见MDN文档? [window.requestAnimationFrame][]

--------------------

以上都是废话，多写才能体会。这里我尝试用该方法写了个晃动动画（点击黑盒晃动，个人练习并没有考虑兼容性）：

[动画练习DEMO][DEMO]

JS代码：

//从网页中获取一个元素
    var box = document.getElementById('box')
    shake(box, 500, 15)
    
    //接受三个参数：动画元素，持续时间，晃动距离
    function shake(elm, dur, distance) {
      if (elm) {    
         var dur = dur || 500
         var distance = distance || 10   
    //保存原样式
        var original_css = elm.style.cssText
        elm.addEventListener('click', ani, false)
      } else {
        return 'no param'
      }
    
      function ani() {
        var start = null
       requestAnimationFrame(act)
    //requestAnimationFrame每次调用向callback中传入一个时间戳，时间戳为每次调用的时间点
        function act(time_stamp) {
          if(start === null) start = time_stamp
          var elapsed = time_stamp - start
          if ((elapsed / dur) < 1) {
          //乘以4PI，来回往复两次， 使用正弦函数得到比例
            elm.style.transform = 'translateX(' + distance * Math.sin((elapsed / dur) * 4 * Math.PI) + 'px' + ')'
            //调用该方法将返回一个ID值用于结束调用
            var time_id = requestAnimationFrame(act)
          } else {
          //恢复原样式，停止动画
            elm.style.cssText = original_css
            cancelAnimationFrame(time_id)
          }
        }
      }
    }

在实际开发中， 当然尽量使用css动画， 毕竟css动画性能更优。但是对于一些复杂的动画，比如有暂停，继续等复杂交互等动画还是需要`requestAnimationFrame`，在张鑫旭大神的这篇文章中[CSS3动画那么强，requestAnimationFrame还有毛线用？][CSS3_requestAnimationFrame] 深入浅出的阐释了该方法， 另外他的demo中也有一个很直观的栗子?

该方法其他参考资料mark下：  
[性能更好的js动画实现方式——requestAnimationFrame][js_requestAnimationFrame]  
[HTML5探秘：用requestAnimationFrame优化Web动画][HTML5_requestAnimationFrame_Web]

[requestAnimationFrame]: http://www.cnblogs.com/aaronjs/p/4283109.html
[setInterval_DEMO]: http://codepen.io/HelloLeeChan/full/rOgwKQ/
[requestAnimationFrame_DEMO]: http://codepen.io/HelloLeeChan/full/RWmQOm/
[window.requestAnimationFrame]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
[DEMO]: http://codepen.io/HelloLeeChan/full/EVMROO/
[CSS3_requestAnimationFrame]: http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/
[js_requestAnimationFrame]: http://www.cnblogs.com/2050/p/3871517.html
[HTML5_requestAnimationFrame_Web]: http://www.webhek.com/requestanimationframe/