捕捉 SVG 动画以减慢 FPS 的速度

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 );