[练习] requestAnimationFrame的使用

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

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

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

setInterval动画DEMO
requestAnimationFrame动画DEMO

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

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

---

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

动画练习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还有毛线用？ 深入浅出的阐释了该方法， 另外他的demo中也有一个很直观的栗子?

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