requestAnimationFrame原理

API 简介

window.requestAnimationFrame(callback);

用于展示动画时，告诉浏览器在下一次重绘之前继续更新动画。
这个函数的传入参数为一个callback回调函数，这个回调函数即是动画函数。该被传入的动画函数会在浏览器下一次重绘之前执行。

回调函数的执行时间通常为60s，但是遵循W3C标准的浏览器中，回调函数的执行次数和浏览器屏幕刷新次数相匹配。即，若此函数所在的元素处于后台标签页或者隐藏的里时，为了提升性能和电池寿命，requestAnimationFrame()将被暂停调用。

回调函数的传入参数为DOMHighRestimeStamp。此参数存储回调函数被执行的时间，与Performance.now()的返回值相同。同一个帧执行的不同回调函数，得到的DOMHighRestimeStamp参数值为相同的时间戳。这个时间戳是一个十进制数，单位毫秒，最小精度为1ms。

requestAnimationFrame的返回值为一个long型的整数，唯一标识了回调列表。将此返回值传送给window.cancelAnimationFrame() 可以取消回调函数的执行。但是，在callback内部执行cancelAnimationFrame不能取消动画。

实例

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
    // 回调函数callback
  if (!start) start = timestamp;