我如何使用jQuery SVG插件提高svg動畫性能

我正在爲我的樂隊網站構建我的第一個javascript項目，並且我正在嘗試增加基於svg的動畫的性能（具體來說就是我的click事件的性能）。您可以在這裏查看頁面：http://djangotheband.com/specialLink.html 我使用Keith Wood的jQuery SVG插件來生成svg元素，並使用他的附加動畫插件來爲雲製作動畫。我使用css將顏色添加到雲中。這裏是做動畫的代碼：我如何使用jQuery SVG插件提高svg動畫性能

$('#svgScape').mouseenter(function() { 

    //lightning strike on click          
    $('polygon').click(function() { 

     $('#lightning').animate({svgOpacity: 1.0}, 150); 
     $('#lightning').animate({svgOpacity: 0.0}, 15); 
     }); 

    //animate cloud when user rolls over it 
    $('#cloud > polygon').mouseenter(function() { 
     //sets the svg opacity to 0% 
     $(this).animate({svgOpacity: 0.0}, 100); 

    }).mouseleave(function() { 
     //sets the svg opacity back to 100% 
     $(this).animate({svgOpacity: 1.0}, 400); 
     }); 

}).mouseleave(function() {});

正如我所說的，這是我的第一個項目，所以很多的，這是很新的給我。請給我任何建議，以改善我的動畫表現，如果您需要更多細節，請告訴我。謝謝！

來源

2012-03-06 user1251258

從這裏看起來不錯。所有主流瀏覽器都沒有延遲。使用相當標準的CPU，沒有什麼可說的。你在看什麼？ – Ohgodwhy 2012-03-06 04:07:34

如果您可以從不透明度切換到不透明度（可能與筆畫不透明度一起），您可能會看到更好的性能。在Keith Woods插件中，SVG填充不透明屬性似乎被稱爲svgFillOpacity。

來源

2012-03-06 09:14:34

我如何使用jQuery SVG插件提高svg動畫性能

回答

相關問題