摘要:會存在過度繪制,會造成幀丟失,繼而導(dǎo)致動畫斷續(xù)顯示。瀏覽器可以優(yōu)化并行的動畫動作,更合理的重新排列動作序列,并把能夠合并的動作放在一個渲染周期內(nèi)完成,從而呈現(xiàn)出更流暢的動畫效果。通過,動畫能夠和動畫變換或動畫同步發(fā)生。
就終極目的來說,requestAnimationFrame就是setTimeout。既然有了setTimeout,那還要requestAnimationFrame來干嘛。setTimeout會存在過度繪制,會造成幀丟失,繼而導(dǎo)致動畫斷續(xù)顯示。這也是setTimeout的定時器值推薦最小使用16.7ms的原因(16.7 = 1000 / 60, 即每秒60幀)。
瀏覽器可以優(yōu)化并行的動畫動作,更合理的重新排列動作序列,并把能夠合并的動作放在一個渲染周期內(nèi)完成,從而呈現(xiàn)出更流暢的動畫效果。requestAnimationFrame就是為了這個而出現(xiàn)的。我所做的事情很簡單,跟著瀏覽器的繪制走,如果瀏覽設(shè)備繪制間隔是16.7ms,那我就這個間隔繪制;如果瀏覽設(shè)備繪制間隔是10ms, 我就10ms繪制。這樣就不會存在過度繪制的問題,動畫不會掉幀。通過requestAnimationFrame(),JS動畫能夠和CSS動畫/變換或SVG SMIL動畫同步發(fā)生。另外,如果在一個瀏覽器標簽頁里運行一個動畫,當這個標簽頁不可見時,瀏覽器會暫停它,這會減少CPU,內(nèi)存的壓力,節(jié)省電池電量。
requestAnimationFrame的用法為了更好的兼容各種瀏覽器,加上了兼容各種瀏覽器引擎前綴。谷歌瀏覽器,火狐瀏覽器,IE10+都實現(xiàn)了這個函數(shù),即使在ie9以下,執(zhí)行requestAnimationFrame方法也不會出錯。
(function() { var lastTime = 0; var vendors = ["webkit", "moz"]; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || // name has changed in Webkit window[vendors[x] + "CancelRequestAnimationFrame"]; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16.7 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function(id) { clearTimeout(id); }; } }()); window.requestAnimationFrame(function(/* time */ time){ // time ~= +new Date // the unix time });
參考文章
http://www.zhangxinxu.com/wor...
http://www.webhek.com/request...
http://blog.chinaunix.net/uid...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/86760.html
摘要:會存在過度繪制,會造成幀丟失,繼而導(dǎo)致動畫斷續(xù)顯示。瀏覽器可以優(yōu)化并行的動畫動作,更合理的重新排列動作序列,并把能夠合并的動作放在一個渲染周期內(nèi)完成,從而呈現(xiàn)出更流暢的動畫效果。通過,動畫能夠和動畫變換或動畫同步發(fā)生。 就終極目的來說,requestAnimationFrame就是setTimeout。既然有了setTimeout,那還要requestAnimationFrame來干嘛...
摘要:會存在過度繪制,會造成幀丟失,繼而導(dǎo)致動畫斷續(xù)顯示。瀏覽器可以優(yōu)化并行的動畫動作,更合理的重新排列動作序列,并把能夠合并的動作放在一個渲染周期內(nèi)完成,從而呈現(xiàn)出更流暢的動畫效果。通過,動畫能夠和動畫變換或動畫同步發(fā)生。 就終極目的來說,requestAnimationFrame就是setTimeout。既然有了setTimeout,那還要requestAnimationFrame來干嘛...
摘要:會存在過度繪制,會造成幀丟失,繼而導(dǎo)致動畫斷續(xù)顯示。瀏覽器可以優(yōu)化并行的動畫動作,更合理的重新排列動作序列,并把能夠合并的動作放在一個渲染周期內(nèi)完成,從而呈現(xiàn)出更流暢的動畫效果。通過,動畫能夠和動畫變換或動畫同步發(fā)生。 就終極目的來說,requestAnimationFrame就是setTimeout。既然有了setTimeout,那還要requestAnimationFrame來干嘛...
摘要:無線頁面本就分秒必爭,更不用說當我們在無線頁面中使用動畫的時候。頁面中元素的布局是相對的,因此一個元素的布局發(fā)生變化,會聯(lián)動地引發(fā)其他元素的布局發(fā)生變化。它通知瀏覽器在頁面重繪前執(zhí)行你的回調(diào)函數(shù)。 無線頁面本就分秒必爭,更不用說當我們在無線頁面中使用動畫的時候。不管是css動畫還是canvas動畫,我們都需要時刻小心著,并且有必要掌握頁面性能的基本分析方法。 既然我們的目標是優(yōu)化,那么...
閱讀 1572·2021-11-25 09:43
閱讀 2476·2019-08-30 15:54
閱讀 2938·2019-08-30 15:53
閱讀 1087·2019-08-30 15:53
閱讀 747·2019-08-30 15:52
閱讀 2538·2019-08-26 13:36
閱讀 807·2019-08-26 12:16
閱讀 1210·2019-08-26 12:13