window.requestAnimationFrame

今天小豬在看一個html5的demo時一直在找他的動畫是怎麼實現的，按照個人理解就應該是調用setInterval來循環調用動畫函數來實現。可是在Demo中就是找不到這個函數。乾着急的小豬隻好一步一步的來看是怎麼實現的，以後發現了這麼一句代碼：

window.RAF = (function () {
    return window.requestAnimationFrame || 

           window.webkitRequestAnimationFrame || 

           window.mozRequestAnimationFrame || 

           window.oRequestAnimationFrame || 

           window.msRequestAnimationFrame || 

           function (callback) { window.setTimeout(callback, 1000 / 60); };
})();

原來是這樣。

window.requestAnimationFrame 告訴瀏覽器您要執行的動畫而且請求瀏覽器的在下一個動畫幀重繪窗口,方法在瀏覽器重繪以前做爲一個回調函數被調用,就是告訴瀏覽器在刷新屏幕的時候，調用這個方法。

 

在90年代，那個互聯網作廣告的年代，window上面各類走馬燈，各類狀態文字都是用setTimeout來時實現的。

動畫的問題最棘手的是延時問題，對於顯示器來講，每一秒60幀頻，若是咱們按照瀏覽器的刷新速率來控制咱們的動畫時間的話會有很好的效果，即17ms,setTimeout（callback,1000/60)，可是：
1.各個瀏覽器及時精度是不同的。
2.對於setTimeout 和setInterval 實現機制並非咱們須要的那樣，當通過特定的時間後，瀏覽器會將那部分代碼加入到UI的繪製隊列當中，若是這個時候UI線程很忙，有其它的任務阻塞，動畫的下一幀就不會按時執行。通過長時間的累計堆加以後，可能咱們偏離原來的時間點偏差愈來愈大。
Mozilla 的 Robert O'Callahan 在思考這個問題，並想出了一個獨特的方案。他指出CSS transitions 和 animations的優點在於瀏覽器知道哪些動畫將會發生，因此獲得正確的間隔來刷新UI。而javascript動畫，瀏覽器不知道動畫正在發生。他的解決方案是建立一個mozRequestAnimationFrame()方法來告訴瀏覽器哪些javascript代碼正在執行，這使得瀏覽在執行一些代碼後獲得優化。
mozRequestAnimationFrame()方法接受一個參數，是一個屏幕重繪前被調用的函數。這個函數用來對生成下合適的dom樣式的改變，這些改變用在下一次重繪中。你能夠像調用setTimeout()同樣的方式鏈式調用mozRequestAnimationFrame()。
這個就是window.requestAnimationFrame的由來。

在Mozilla官網看到以下

Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.
因爲這項技術的規範尚未穩定，正確的前綴使用在各類瀏覽器的兼容性表。還要注意的是語法和行爲的實驗技術是若有改變，在將來版本的瀏覽器的規格變化。
目前在Android系統下是不支持的，動畫只能setTimeout咯。