捕捉SVG動畫拖慢FPS

正如你可以在此頁面上看到：http://www.gigil.it/newroot/index.php//come-doniamo 捕捉SVG動畫拖慢FPS

我有卡扣SVG做了一些SVG動畫。當元素位於視口中時，會觸發動畫。它基本上在SVG內部的所有路徑上執行相同的動畫。

下面是腳本：

jQuery(window).scroll(function() { 

     jQuery(".icon-come-doniamo").each(function(){ 
      //console.log($(this)); 
      if (jQuery(this).isOnScreen() == true) { 
       if (!jQuery(this).hasClass("already-visible")){ 
        var $that = jQuery(this); 
        setTimeout(function(){ 
        //jQuery(this).addClass("already-visible"); 
         var Elemento = $that.find("svg"); 
         var iconSnap = Snap("#"+Elemento.attr("id")); 
         var iconPaths = iconSnap.selectAll("path"); 
         var delays = 0; 
         var count = 0; 

         iconPaths.forEach(function(elem,i) { 
         setTimeout(function(){ 
          //console.log("gegge"); 
          var elemDim = elem.getBBox(); 
          elem.animate({transform: 'r0,' + elemDim.cx + ',' + elemDim.cy + 's1,1' }, 700, mina.linear); 
         }, delays); 
         delays = delays + 400; 
         count = count + 1; 
         }); 

         if (count == iconPaths.length) { 
          //console.log("fattgegge"); 
          $that.addClass("already-visible"); 
         } 
        },1000); 
       } 
      } 
     }); 

    });

很簡單，我認爲，但很多時候FPS變得非常非常低和動畫成爲超級笨重。我已經嘗試過任何東西，但沒有太大的改變。任何提示？

來源

2016-03-06 Federico Vezzoli

這將是有用的，如果你可以將它們隔離到一個的jsfiddle或相似。你有幾條路徑同時都是動畫，很難知道這是否是一個問題。我不確定你爲什麼在變換中也有'r0'。旋轉會導致svg轉換的大幅度減速（不知道如果它的優化設置爲0或不是0）。值得注意的是，我認爲你可以做Snap（Elemento）而不是訪問ID，這對速度沒有任何影響，就像一個微小的代碼優化一樣。 – Ian

通過刪除邊界框計算來解決它。刪除了旋轉屬性。

現在它變得更平滑。

從這：

elem.animate({transform: 'r0,' + elemDim.cx + ',' + elemDim.cy + 's1,1' }, 700, mina.linear);

這樣：

elem.animate({transform: 's1,1' }, 700, mina.linear);

來源

2016-03-07 11:50:12

捕捉SVG動畫拖慢FPS

回答

相關問題