寫緩動函數用到requestAnimationFrame函數,之前了解過一些,但總覺得又不是很了解,所以翻譯一篇老外的文章,以便學習分享。
requestAnimationFrame是什麼?
以前我們做動畫需要一個定時器,每間隔多少毫秒就做出一些改變。現在有個好消息:浏覽器廠商已經決定提供一個專門做動畫的方法,即requestAnimationFrame(),而且基於浏覽器的層面也能更好的進行優化。但是呢,這只是一個做動畫的基礎API,即不基於DOM元素的style變化,也不基於canvas,或者WebGL。所以,具體的動畫細節需要我們自己寫。
我們為什麼要用它?
對於同時進行的n個動畫,浏覽器能夠進行優化,把原本需要N次reflow和repaint優化成1次,這樣就實現了高質量的動畫。舉個例子,現在有基於JS的動畫,還有基於CSS的transitions,或者SVG SMIL. Plus,如果浏覽器的某個tab正在運行這樣一個動畫,然後你切到另一個tab,或者干脆最小化,總之就是你看不見它了,這時浏覽器就會停止動畫。這將意味著更少的CPU,GPU和更少的內存消耗,這樣電池的使用壽命就大大延長了。
如何使用它?
復制代碼 代碼如下:
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
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
復制代碼 代碼如下:
window.requestAnimationFrame(function(/* time */ time){
// time ~= +new Date // the unix time
}, /* optional bounding elem */ elem);
先給出Chrome和Firefox的版本
復制代碼 代碼如下:
window.mozRequestAnimationFrame([callback]); // Firefox
window.webkitRequestAnimationFrame(callback[, element]); // Chrome
參數:
callback:(FF可選,Chrome必選)
下次repaint調用的函數,函數的第一個參數是當前時間
element:(FF無)
意譯一下吧:其實就是畫布了,而那個‘畫',是動畫。(the element that visually bounds the entire animation)。對canvas和WebGL來說,它就是<canvas>元素,對於DOM節點來說,你可以不管它,如果你想稍微進行一下優化,也可以傳個參數進來。
它到底靠不靠譜啊?
現在,Webkit實現(Nightly Safari 和 Chrome Dev Channel 可用)和Mozilla實現(FF4可用)有一些的差異,Mozilla的實現有一個Bug。事實上,FF動畫的幀數是這麼算的:1000/(16 + N) fps,其中N是callback的執行時間,單位為毫秒。如果你的callback執行時間為1000ms,那麼它最高的幀數也就只有1fps。如果你的callback執行時間為1ms,那麼幀數差不多就是60fps。這個bug肯定會被修復,也許就是FF4的下一個版本吧。Chrome10沒有time參數(added in m11.弱弱的問下,m11是什麼?),FF目前沒有element參數。
我看了下火狐的那個bug,大概就是說:
FF的mozRequestAnimationFrame()永遠不可能達到60fps,即使你的callback執行時間小於1000/60毫秒。舉個例子:
復制代碼 代碼如下:
function callback(time) {
window.mozRequestAnimationFrame(callback);
doWork();
}
如果doWork()耗時1000/60毫秒,那麼幀數大約是30fps,而同樣的動畫如果使用setTimeout(callback, 16),幀速則是60fps。似乎callback總是在callback執行完畢後的大約16ms再次開始執行,而不是在callback開始執行後的16ms再次開始執行,如果是後者,且計算又夠快的話,就能產生60fps的幀數。
如果你是規范控,傳送門在此
話不多說,首先來個經典的動畫函數:
復制代碼 代碼如下:
function animate(element, name, from, to, time) {
time = time || 800; //默認0.8秒
var style = element.style,
latency = 60, // 每60ms一次變化
count = time / latency, //變化的次數
step = Math.round((to - from) / count), //每一步的變化量
now = from;
function go() {
count--;
now = count ? now + step : to;
style[name] = now + 'px';
if (count) {
setTimeout(go, latency);
}
}
style[name] = from + 'px';
setTimeout(go, latency);
}
姑且不論這個函數的設計存在局限性,如只能對以px為單位的樣式進行修改。僅從函數的實現上來看,這可以是一個非常經典的動畫理念,其基本邏輯由以下部分組成:
獲取起點值from和終點值to,通過動畫需要進行的時間time,以及每偵間隔latency的要求,計算出值的改變次數count和每次改變的量step。
開啟setTimeout(fn, latency);來步進到下一偵。
在下一偵中,設置屬性步進一次,如果動畫還沒結束,再回到第2步繼續下一偵。
這個函數工作得很好,服務了千千萬萬的站點和系統,事實上jQuery的animate函數的核心也無非是setInterval函數。
但是,隨著現在系統復雜度的穩步上升,動畫效果也越來越多,同時對動畫的流暢度也有了更多的重視,這導致上面的函數會出現一些問題。例如同時打開100個動畫效果,根據上面的函數,很明顯會有100個定時器在同時運行,這些定時器之間的調度會對性能有輕微的影響。雖然在正常的環境中,這些許的影響並不會有什麼關系,但是在動畫這種對流暢度有很高要求的環境下,任何細微的影響都可能產生出不好的用戶體驗。
在這樣的情況下,有一些開發者就發明了一種基於統一幀管理的動畫框架,他使用一個定時器觸發動畫幀,不同的動畫來注冊這些幀,在每一幀上處理多個動畫的屬性變化。這樣的好處是減少了定時器調度的開銷,但是對於動畫框架的開發者來說,統一幀管理、提供監聽幀的API等,都是需要開發和維護的。
浏覽器的直接支持
最終,浏覽器廠商們發現這件事其實可以由他們來做,並且基於浏覽器層面,還可以有更多的優化,比如:
對於一個偵中對DOM的所有操作,只進行一次Layout和Paint。
如果發生動畫的元素被隱藏了,那麼就不再去Paint。
於是,浏覽器開始推出一個API,叫做requestAnimationFrame,關於這個函數,MDC的相關頁面有比較詳細的介紹,簡單來說,這個函數有2種使用方法:
調用requestAnimationFrame函數,傳遞一個callback參數,則在下一個動畫幀時,會調用callback。
不傳遞參數地直接調用該函數,啟動動畫幀,下一個幀觸發時,會同時觸發window.onmozbeforepaint事件,可以通過注冊該事件來進行動畫。
第2種方法由於依賴於Firefox自己的事件,且beforepaint事件還沒進入到標准中,所以不推薦使用,還是使用第1種方式比較好。此時,我們的動畫邏輯可以變成這樣:
記錄當前時間startTime,作為動畫開始的時間。
請求下一幀,帶上回調函數。
下一幀觸發時,回調函數的第一個參數為當前的時間,再與startTime進行比較,確定時間間隔ellapseTime。
判斷ellapseTime是否已經超過事先設定的動畫時間time,如果超過,則結束動畫。
計算動畫屬性變化的差值differ = to - from,再確定在ellapseTime的時候應該變化多少step = differ / time * ellapseTime。
計算出現在應該變化到的位置Math.round(from + step),並重新對樣式賦值。
繼續請求下一幀。
新的動畫函數
下面就是一個全新的動畫函數:
復制代碼 代碼如下:
function animate(element, name, from, to, time) {
time = time || 800; // 默認0.8秒
var style = element.style,
startTime = new Date;
function go(timestamp) {
var progress = timestamp - startTime;
if (progress >= duration) {
style[name] = to + 'px';
return;
}
var now = (to - from) * (progress / duration);
style[name] = now.toFixed() + 'px';
requestAnimationFrame(go);
}
style[name] = from + 'px';
requestAnimationFrame(go);
}
到這一步,還剩一個問題,那就是並不是每個浏覽器都支持requestAnimationFrame函數的,所以再做一個簡單的修正。
根據Firefox的特性來看,其mozRequestAnimationFrame提供的最高FPS為60,並且會根據每一幀的計算的耗時來進行調整,比如每一幀計算用了1s,那他只會提供1FPS的動畫效果。
而Chrome的高版本同樣也實現了這個函數,叫webkitRequestAnimationFrame,可以預見未來還會有Opera的oRequestAnimationFrame和IE的msRequestAnimationFrame,所以這裡一並做一個簡單的兼容處理:
復制代碼 代碼如下:
requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(callback) { setTimeout(callback, 1000 / 60); };