我如何使用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动画性能

回答

相关问题