国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

requestAnimationFrame 優化Web動畫

biaoxiaoduan / 2213人閱讀

摘要:會存在過度繪制,會造成幀丟失,繼而導致動畫斷續顯示。瀏覽器可以優化并行的動畫動作,更合理的重新排列動作序列,并把能夠合并的動作放在一個渲染周期內完成,從而呈現出更流暢的動畫效果。通過,動畫能夠和動畫變換或動畫同步發生。

就終極目的來說,requestAnimationFrame就是setTimeout。既然有了setTimeout,那還要requestAnimationFrame來干嘛。setTimeout會存在過度繪制,會造成幀丟失,繼而導致動畫斷續顯示。這也是setTimeout的定時器值推薦最小使用16.7ms的原因(16.7 = 1000 / 60, 即每秒60幀)。

瀏覽器可以優化并行的動畫動作,更合理的重新排列動作序列,并把能夠合并的動作放在一個渲染周期內完成,從而呈現出更流暢的動畫效果。requestAnimationFrame就是為了這個而出現的。我所做的事情很簡單,跟著瀏覽器的繪制走,如果瀏覽設備繪制間隔是16.7ms,那我就這個間隔繪制;如果瀏覽設備繪制間隔是10ms, 我就10ms繪制。這樣就不會存在過度繪制的問題,動畫不會掉幀。通過requestAnimationFrame(),JS動畫能夠和CSS動畫/變換或SVG SMIL動畫同步發生。另外,如果在一個瀏覽器標簽頁里運行一個動畫,當這個標簽頁不可見時,瀏覽器會暫停它,這會減少CPU,內存的壓力,節省電池電量。

requestAnimationFrame的用法

為了更好的兼容各種瀏覽器,加上了兼容各種瀏覽器引擎前綴。谷歌瀏覽器,火狐瀏覽器,IE10+都實現了這個函數,即使在ie9以下,執行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...

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81396.html

相關文章

  • requestAnimationFrame 優化Web動畫

    摘要:會存在過度繪制,會造成幀丟失,繼而導致動畫斷續顯示。瀏覽器可以優化并行的動畫動作,更合理的重新排列動作序列,并把能夠合并的動作放在一個渲染周期內完成,從而呈現出更流暢的動畫效果。通過,動畫能夠和動畫變換或動畫同步發生。 就終極目的來說,requestAnimationFrame就是setTimeout。既然有了setTimeout,那還要requestAnimationFrame來干嘛...

    DirtyMind 評論0 收藏0
  • requestAnimationFrame 優化Web動畫

    摘要:會存在過度繪制,會造成幀丟失,繼而導致動畫斷續顯示。瀏覽器可以優化并行的動畫動作,更合理的重新排列動作序列,并把能夠合并的動作放在一個渲染周期內完成,從而呈現出更流暢的動畫效果。通過,動畫能夠和動畫變換或動畫同步發生。 就終極目的來說,requestAnimationFrame就是setTimeout。既然有了setTimeout,那還要requestAnimationFrame來干嘛...

    binta 評論0 收藏0
  • requestAnimationFrame 優化Web動畫

    摘要:會存在過度繪制,會造成幀丟失,繼而導致動畫斷續顯示。瀏覽器可以優化并行的動畫動作,更合理的重新排列動作序列,并把能夠合并的動作放在一個渲染周期內完成,從而呈現出更流暢的動畫效果。通過,動畫能夠和動畫變換或動畫同步發生。 就終極目的來說,requestAnimationFrame就是setTimeout。既然有了setTimeout,那還要requestAnimationFrame來干嘛...

    Allen 評論0 收藏0
  • 無線頁面動畫優化實例

    摘要:無線頁面本就分秒必爭,更不用說當我們在無線頁面中使用動畫的時候。頁面中元素的布局是相對的,因此一個元素的布局發生變化,會聯動地引發其他元素的布局發生變化。它通知瀏覽器在頁面重繪前執行你的回調函數。 無線頁面本就分秒必爭,更不用說當我們在無線頁面中使用動畫的時候。不管是css動畫還是canvas動畫,我們都需要時刻小心著,并且有必要掌握頁面性能的基本分析方法。 既然我們的目標是優化,那么...

    ivydom 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<