requestAnimationFrame

在 requestAnimationFrame 之前，主要借助 setTimeout/ setInterval 来编写 JS 动画，而动画的关键在于动画帧之间的时间间隔设置，这个时间间隔的设置有讲究，一方面要足够小，这样动画帧之间才有连贯性，动画效果才显得平滑流畅；另一方面要足够大，确保浏览器有足够的时间及时完成渲染。
大部分显示器的刷新频率是60Hz，即每秒钟重绘 60 次。大多数浏览器都会对重绘操作的频率加以限制，使其不超过显示器的刷新频率。一般最平滑流畅的动画的时间间隔是 1000ms/60，约为 16.7 ms.
时间间隔对于动画非常重要，但是 setTimeout/ setInterval 的显著缺陷就是设定的时间并不精确，它们只是在设定的时间后将相应任务添加到任务队列中，而任务队列中如果还有前面的任务尚未执行完毕，那么后添加的任务就必须等待，这个等待的时间造成了原本设定的动画时间间隔不准。
requestAnimationFrame 应运而生，它采用的是系统时间间隔(约16.7ms)，保持最佳绘制效果与效率，使各种网页动画有一个统一的刷新机制，从而节省系统资源，提高系统性能。
MDN关于requestAnimationFrame：告诉浏览器，希望执行一个动画，并要求浏览器在下次重绘之前使用指定的回调函数更新动画。（如果想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用 window.requestAnimationFrame(回调函数)，这样动画才有很多帧，否则只有两帧（初始状态算一帧，回调函数执行一次的结果算一帧）且在16.7ms内完成就失去了动画效果）。
回调函数会被自动传入 'DOMHighResTimeStamp'参数（时间戳，十进制数，单位是毫秒，最小精度为1ms），该参数指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。在同一个帧中的多个回调函数，每个都会被传入一个相同的时间戳。
示例

<svg width="800" height="600">
    <circle cx="50" cy="50" r="10" fill="red" id="myCircle1"></circle>
    <circle cx="50" cy="100" r="10" fill="red" id="myCircle2"></circle>
</svg>
<script>
  const log=console.log;
  const circle1=document.getElementById('myCircle1');
  const circle2=document.getElementById('myCircle2');

  let start=null;
  let count=0;//统计动画共有多少帧
  function step(timestamp,circle) {
      if(!start){
          start=timestamp;
      }
      let progress=timestamp-start;
      let dx=Math.min(progress/10,600);
      circle.setAttribute('cx',dx);
      if(progress<6000){
          count++;
          // 在浏览器下次重绘之前继续更新下一帧动画
          window.requestAnimationFrame((timestamp)=>{step(timestamp,circle)});
      }
      else{
          log(progress);
          log(count);
      }
  }

  window.requestAnimationFrame((timestamp)=>step(timestamp,circle1));//不会阻塞后面语句执行

以上代码执行效果就是一个svg绘制的圆形在 6000ms 内水平从左向右匀速移动，最终状态如图1所示，可见动画整体耗时 progress 为 6006.583 ms，动画帧数 count 为 359，每帧之间的时间间隔为 progress/count 约为 16.7 ms。

图1-动画结果1

还有一个要注意的地方，就是 window.requestAnimationFrame(回调函数) 不会阻塞后面语句执行，所以下段代码中通过两个 window.requestAnimationFrame(回调函数) 语句可以创造两个同时进行的动画，如图2所示。（由于共有了变量 count，所以最终其值为两个动画的总帧数。）

 window.requestAnimationFrame((timestamp)=>step(timestamp,circle1));//不会阻塞后面语句执行
  window.requestAnimationFrame((timestamp)=>step(timestamp,circle2));

图2-两个动画

最后编辑于：2019.04.23 13:20:25