webAPI之window.requestAnimationFrame

1.作用：

告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

首先需要了解浏览器渲染性能原理,参考https://zhuanlan.zhihu.com/p/29418126

2.语法

window.requestAnimationFrame(callback);

参数

callback：
一个指定函数的参数，该函数在下次重新绘制动画时调用。这个回调函数只有一个传参，DOMHighResTimeStamp，指示requestAnimationFrame() 开始触发回调函数的当前时间（performance.now()返回的时间）。

返回值：
一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

3.范例

var start =  null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position =  'absolute';  
function  step(timestamp)  {
  if  (!start) start = timestamp;
  var progress = timestamp - start; element.style.left = Math.min(progress /  10,  200)  +  'px';
  if  (progress <  2000)  {
 window.requestAnimationFrame(step);
  }  
} window.requestAnimationFrame(step);

4.应用

该技术在 React 和 Angular 里面都有使用

5.深度理解

文献1.http://creativejs.com/resources/requestanimationframe/
文献2.http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/
文献3.https://www.cnblogs.com/xiaohuochai/p/5777186.html

如何取消？

window.cancelAnimationFrame()
描述：取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求

语法：window.mozCancelAnimationFrame(requestID);
requestID先前调用window.requestAnimationFrame()方法时返回的ID.