实现Animating使用requestAnimationFrame，尽量不用setInterval,setTimeout

requestAnimationFrame(基于脚本的动画的控制)，最初是在某html5教程里看到的，是用来代替setInterval(),setTimeout()进行绘制动画更平滑更高效的方法。

requestAnimationFrame 方法可以解决丢失帧的问题，因为它使应用能够在浏览器需要更新页面显示时（而且仅在这种情况下）获得通知。 因此，应用可与浏览器的绘制时间间隔保持完全一致，并且仅使用适量的资源。从 setTimeout 切换到 requestAnimationFrame 非常容易，因为它们都规划单个回调。要实现持续的动画，请在调用动画函数后再次调用 requestAnimationFrame。

此方法的普通JS实现如下：

 1 // handle multiple browsers for requestAnimationFrame()
 2 window.requestAFrame = (function () {
 3     return window.requestAnimationFrame ||
 4             window.webkitRequestAnimationFrame ||
 5             window.mozRequestAnimationFrame ||
 6             window.oRequestAnimationFrame ||
 7             // if all else fails, use setTimeout
 8             function (callback) {
 9                 return window.setTimeout(callback, 1000 / 60); // shoot for 60 fps
10             };
11 })();
12
13 // handle multiple browsers for cancelAnimationFrame()
14 window.cancelAFrame = (function () {
15     return window.cancelAnimationFrame ||
16             window.webkitCancelAnimationFrame ||
17             window.mozCancelAnimationFrame ||
18             window.oCancelAnimationFrame ||
19             function (id) {
20                 window.clearTimeout(id);
21             };
22 })();

使用此方法，为了得到更好的效果，可以配合window.performance.now()来获取当前时间，它是一个DOMHighResTimeStamp，是从页面导航开始时测量的高精确度时间，以毫秒为单位，精确到千分之一毫秒。此时间值不直接与 Date.now() 进行比较，后者测量自 1970 年 1 月 1 日至今以毫秒为单位的时间。将时间值从 DOMTimeStamp 更改为 DOMHighResTimeStamp 是 W3C 针对基于脚本动画计时控制规范的最新编辑草案中的最新更改。

参考：

https://msdn.microsoft.com/zh-cn/library/ie/hh920765(v=vs.85).aspx

https://msdn.microsoft.com/zh-cn/library/ie/hh973355(v=vs.85).aspx

https://msdn.microsoft.com/zh-cn/library/ie/hh773174(v=vs.85).aspx

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

http://hacks.mozilla.org/2010/08/more-efficient-javascript-animations-with-mozrequestanimationframe/