Question

我正在为我的乐队的网站构建我的第一个javascript项目，我目前正在尝试提高基于svg的动画的性能（特别是我的点击事件的性能）。您可以在此处查看该页面：http://djangotheband.com/specialLink.html 我正在使用Keith Wood的jQuery SVG插件来生成svg元素，并使用他附加的动画插件来动画云。我使用css将颜色添加到云端。以下是执行动画的代码：

$('#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 () {});

正如我所说，这是我的第一个项目，所以这对我来说很新。请给我任何改进动画表现的建议，如果您需要更多详情，请告诉我。谢谢！

Answer 1

如果您可以从不透明度切换到填充不透明度（可能与笔触不透明度一起），您可能会看到更好的性能。在Keith Woods插件中，SVG fill-opacity属性似乎被称为svgFillOpacity。

如何使用jQuery SVG插件改进svg动画性能

1 个答案: