寫緩動函數用到requestAnimationFrame函數，之前了解過一些，但總覺得又不是很了解，所以翻譯一篇老外的文章，以便學習分享。
requestAnimationFrame是什麼？
以前我們做動畫需要一個計時器，每間隔多少毫秒就做出一些改變。現在有個好消息：瀏覽器廠商已經決定提供一個專門做動畫的方法，即requestAnimationFrame()，而且基於瀏覽器的層面也能更好的進行優化。但是呢，這只是一個做動畫的基礎API，即不基於DOM元素的style變化，也不基於canvas，或者WebGL。所以，具體的動畫細節要我們自己寫。
我們為什麼要用它？
對於同時進行的n個動畫，瀏覽器能夠進行最佳化，把原本需要N次reflow和repaint優化成1次，這樣就實現了高品質的動畫。舉個例子，現在有基於JS的動畫，還有基於CSS的transitions，或者SVG SMIL. Plus，如果瀏覽器的某個tab正在運行這樣一個動畫，然後你切到另一個tab，或者乾脆最小化，總之就是你看不見它了，這時瀏覽器就會停止動畫。這將意味著更少的CPU，GPU和更少的記憶體消耗，這樣電池的使用壽命就大大延長了。
如何使用它？
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
windowoRequestAnimation. |
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
// usage:
// instead of setInterval(render, 16) ....
(function animloop(){
render();
requestAnimFrame(animloop, element);
})();
注意：這裡我使用了“requestAnimFrame”，因為規範仍在不斷變化中，我並不想任由規範擺佈。
requestAnimationFrame API
程式碼如下:
win看到* time */ time){
// time ~= new Date // the unix time
}, /* optional bounding elem */ elem);
先給Chrome且Firefox的版本
程式碼如下:
windowmoz. ; // Firefox
window.webkitRequestAnimationFrame(callback[, element]); // Chrome
參數：
callback:（FF可選，Chrome必選）
下下 下次repaint調用的函數，函數的第一個參數是當前時間
element：（FF無）
意譯一下吧：其實就是畫布了，而那個'畫'，是動畫。 （the element that visually bounds the entire animation）。對canvas和WebGL來說，它就是
