[练习] requestAnimationFrame的使用

Lucky_Boy 发布于2019-08-26 11:23 / 3123人阅读

摘要：主要原因是因为的单线程机制使得其可能在有阻塞的情况下无法精确到毫秒触发。另外在隐藏或不可见的元素中将不会进行重绘或回流，大大降低了开销。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106991.html

[练习] requestAnimationFrame的使用

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

qylost 2019-08-21 10:49 评论0 收藏0
[练习] requestAnimationFrame的使用

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

helloworldcoding 2019-08-22 10:32 评论0 收藏0
2018年8月所遇知识点整理

摘要：注本文章是在工作过程中所接触的知识点的整理，涉及的东西比价杂乱，如有错误之处，欢迎纠错与指导一，页面的锚链接定义锚点锚点链接。类似于我们阅读书籍时的目录页码或章回提示。 *注：本文章是在工作过程中所接触的知识点的整理，涉及的东西比价杂乱，如有错误之处，欢迎纠错与指导一，页面的锚链接 1,定义：锚点,锚点链接。常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还...

silenceboy 2019-08-30 11:05 评论0 收藏0
2018年8月所遇知识点整理

摘要：注本文章是在工作过程中所接触的知识点的整理，涉及的东西比价杂乱，如有错误之处，欢迎纠错与指导一，页面的锚链接定义锚点锚点链接。类似于我们阅读书籍时的目录页码或章回提示。 *注：本文章是在工作过程中所接触的知识点的整理，涉及的东西比价杂乱，如有错误之处，欢迎纠错与指导一，页面的锚链接 1,定义：锚点,锚点链接。常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还...

guqiu 2019-08-23 17:57 评论0 收藏0
html5之canvas

摘要：是新加的标签，主要有和，的应用是动画和图像，的应用是游戏渲染。 HTML5 Canvas canvas是html5新加的标签，主要有2D和3D，2D的应用是动画和图像，3D的应用是游戏渲染。 1. 2D基础 1.1绘制线 canvas window.onload = function(){ ...

苏丹 2019-08-26 13:43 评论0 收藏0