Question

如您所见：http://www.gigil.it/newroot/index.php//come-doniamo

我使用快照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真的很低，动画变得超级笨重。我尝试过任何事情，但没有大的改变。有什么提示吗？

Answer 1

通过删除边界框计算解决了这个问题。删除了旋转属性。

现在它变得更加顺畅了。

由此：

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

到此：

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

Snap SVG动画减慢了FPS

1 个答案: