5

以往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动画


囧囧
1.9k 声望132 粉丝

蚂蚁金服海外银行诚招前端: