GIF動畫與jQuery的動畫性能

我建立這有一堆[軌道]轉盤（單頁）一個網站，每個轉盤將有一個播放/暫停按鈕。設計師希望傳送帶上的暫停按鈕脈動（即將不透明度從80％改變爲100％，並將其降低至80％並保持循環）。GIF動畫與jQuery的動畫性能

我在想，GIF動畫會少一個性能命中比使用jQuery的，因爲我們在頁面上10+轉盤（不要問爲什麼）。我想知道我是否正確。

jQuery代碼我會用會是這樣的（我還沒有編碼的，所以不介意語法錯誤）：

function pb_animate() { 
     $('.pausebutton').animate({opacity:0.8}, 300[ms], function() { 
      $('.pausebutton').animate({opacity:1.0}, 300[ms], function() { 
       pb_animate() 
      } 
     } 
    }

那麼這將是在這種情況下更好：jQuery的或動畫GIF？還是我不擔心什麼？如果您有更好的jQuery解決方案/方法，請發佈。

來源

2013-10-17 user2891893

我還去用CSS，看到@ nietonfir的答案。 – Shomz

CSS3是走在網絡上的動畫的方式。下面的示例1切換和0.8（除去-{webkit,moz,o}-前綴可讀性）之間的不透明度：

@keyframes pulse { 
    0%, 100% { 
     opacity: 1; 
    } 
    50% { 
     opacity: 0.8; 
    } 
} 

.pausebutton { 
    animation: pulse 4s infinite; 
}

或者看到此jsBin。（是的，暫停/播放按鈕，可以在CSS要做的事。）

來源

2013-10-17 20:17:34 nietonfir

@matewka它不僅回答了它，而且還顯示了最快和性能最低的網頁動畫解決方案：CSS3！ – Shomz

這是真的。我只是沒有注意到這個解決方案的任何描述。甚至沒有關於這是CSS的信息。 OP現在應該如何呢？ – matewka

@matewka我明白你的觀點。雖然，嚴格來說，我會看到更像是研究/知識擴展機會的答案，尤其是因爲有兩條評論說這是一個很好的解決方案。再次，不是每個人都是這樣，我同意很多人喜歡盤子上的一切。 – Shomz

我的答案是，這取決於很多轉盤如果包含大量的圖片會產生太多請求到服務器，這將導致大幅減少在頁面加載時，當然我不計算圖片大小，如果是文本，這可能會少一點，你使用的jquery代碼是好的，另一個建議是@ nietonfir的css3代碼，但結果是相同的它涉及到服務器請求，我建議你閱讀這個：Group Multiple Images into One Request and Response因爲它將大幅度提高速度，如果使用大量的圖像，我希望這回答了你的問題。

來源

2013-10-17 20:23:58

GIF動畫與jQuery的動畫性能

回答

相關問題