requestAnimationFrame

requestAnimationFrame使用JS操作动画，如果你想做逐帧动画，你应该用这个方法。这个方法接受一个函数为参，该函数会在重绘前调用。

requestAnimationFrame通过在参数中递归调用requestAnimationFrame()以便得到逐帧动画，被调用的频率是每秒60次，但也会按照W3C标准频率。

IE10和现代浏览器都支持。

返回值
requestID 是一个长整型非零值,作为一个唯一的标识符.你可以将该值作为参数传给 window.cancelAnimationFrame() 来取消这个回调函数。

MDN中的例子：

//动态调整元素左边距,到200px停止
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);

效果展示：

timestamp是时间戳，为每执行一次传给调用函数的参数，表示动画开始到现在消耗的时间，单位是毫秒。

可以在chrome下console.log()输出查看：