捕捉SVG動畫性能

Question

問題：

我使用捕捉SVG繪製和隨後4個動畫圖形（臺式機，筆記本電腦，平板電腦，手機），使他們演變成彼此每5秒。這些設備是使用基本的線條和形狀構建的，以及每個設備的PNG屏幕截圖。你可以看到它在行動here。我原來的代碼如下：

var makeDesktop = function() { 
    deviceOuter.animate({width: 420, height: 300, rx: 20, ry: 20, transform: 'T0,0'}, 1000, mina.easeinout); 
    screenOuter.animate({width: 380, height: 220, transform: 'T0,0'}, 1000, mina.easeinout); 
    screenImageDesktop.animate({width: 380, height: 220, transform: 'T0,0', opacity: 1}, 1000, mina.easeinout); 
    screenImageLaptop.animate({width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout); 
    screenImageTablet.animate({width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout); 
    screenImagePhone.animate({width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout); 
    camera.animate({r: 2.5, transform: 'T0,0'}, 1000, mina.easeinout); 
    desktopDivider.animate({d: "M0,260, 420,260", opacity: 1}, 1000, mina.easeinout); 
    laptopMidDivider.animate({d: "M20,300, 400,300", opacity: 0}, 1000, mina.easeinout); 
    laptopMidLeft.animate({d: "M20,300, 20,300", opacity: 0}, 1000, mina.easeinout); 
    laptopMidRight.animate({d: "M400,300, 400,300", opacity: 0}, 1000, mina.easeinout); 
    deviceBaseLeft.animate({d: "M165,300 Q160,340 140,340", opacity: 1}, 1000, mina.easeinout); 
    deviceBaseRight.animate({d: "M255,300 Q260,340 280,340", opacity: 1}, 1000, mina.easeinout); 
    deviceBaseBottom.animate({d: "M140,340, 280,340", opacity: 1}, 1000, mina.easeinout); 
     mobileButton.animate({r: 10, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout); 
    $("#btn-desktop").addClass("active"); 
    devicePosition = 0; 
}; 

我還試圖重新格式化利用一組：

var makeDesktop = function() { 
    var set = Snap([deviceOuter, screenOuter, screenImageDesktop, screenImageLaptop, screenImageTablet, screenImagePhone, camera, desktopDivider, laptopMidDivider, laptopMidLeft, laptopMidRight, deviceBaseLeft, deviceBaseRight, deviceBaseBottom, mobileButton]); 
    set.animate([{width: 420, height: 300, rx: 20, ry: 20, transform: 'T0,0'}, 1000, mina.easeinout], [{width: 380, height: 220, transform: 'T0,0'}, 1000, mina.easeinout], [{width: 380, height: 220, transform: 'T0,0', opacity: 1}, 1000, mina.easeinout], [{width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout], [{width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout], [{width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout], [{r: 2.5, transform: 'T0,0'}, 1000, mina.easeinout], [{d: "M0,260, 420,260", opacity: 1}, 1000, mina.easeinout], [{d: "M20,300, 400,300", opacity: 0}, 1000, mina.easeinout], [{d: "M20,300, 20,300", opacity: 0}, 1000, mina.easeinout], [{d: "M400,300, 400,300", opacity: 0}, 1000, mina.easeinout], [{d: "M165,300 Q160,340 140,340", opacity: 1}, 1000, mina.easeinout], [{d: "M255,300 Q260,340 280,340", opacity: 1}, 1000, mina.easeinout], [{d: "M140,340, 280,340", opacity: 1}, 1000, mina.easeinout], [{r: 10, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout]) 
    $("#btn-desktop").addClass("active"); 
    devicePosition = 0; 
}; 

我的問題

看到，因爲每一個動畫的持續時間爲1000毫秒和具有相同的緩動曲線，是否有一種實現相同效果的更便宜的方法？在這種情況下使用set會有什麼性能好處，因爲它大大降低了可讀性。

Answer 1

很難猜測，沒有看到一個jsfiddle玩不同的選項，並將其與網頁的其餘部分分開。我首先分開玩弄它。

好處'應該'，你只運行一個計時器，而不是每個元素的計時器，這肯定會造成開銷。

有很多元素，這會產生影響，我認爲在你的情況下，它的邊界。它可能會表現得更好一點，但我不確定它會引人注目。只有你可以知道。我想說的一件事是，在移動設備上測試它們，因爲這通常是svg動畫性能最低的情況。

其他的事情，可能是值得探討...

是否有施加到元件的多個變換（例如轉化的基團或其他容器內這就是變換元件），因爲這將慢下來。

CSS轉換/動畫通常可以執行得更好，但您需要檢查對瀏覽器/設備的支持。 Velocity.js值得一看。

有一個viewBox會影響性能，如果一切最初都是正確的大小，它可以更快，那麼圖像呢？

關於可讀性，在替代版本中，所有內容都不必保留在2行上，所以仍然可以使可讀性更好（如果不是更具可讀性）。例如，可以將它改寫如..

var deviceOuterChanges = [{width: 420, height: 300, rx: 20, ry: 20, transform: 'T0,0'}, 1000, mina.easeinout]; 
var screenOuterChanges = [{width: 380, height: 220, transform: 'T0,0'}, 1000, mina.easeinout]; 
.... 

var set = Snap([deviceOuter, screenOuter.... mobileButton]) 
       .animate([ deviceOuterChanges, 
         screenOuterChanges, 
         ... 
         ]); 

你還可以重複使用其中的一些，因爲所有的screenImage對象具有相同的動畫屬性。