捕捉 SVG 动画减慢 FPS答案

【问题标题】：Snap SVG animation slowing down the FPS捕捉 SVG 动画减慢 FPS
【发布时间】：2016-06-20 03:45:48
【问题描述】：

正如您在此页面上看到的：http://www.gigil.it/newroot/index.php//come-doniamo

我用 snap 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 变得非常低并且动画变得非常庞大。我尝试了任何东西，但没有大的变化。有什么建议吗？

【问题讨论】：

如果您可以将它们隔离到一个 jsfiddle 或类似的文件中，那将会很有用。你有几条路径都在同时动画，很难知道这是否是一个问题。我不确定为什么您的转换中也有“r0”。旋转可能会导致 svg 的转换大幅减慢（不确定是否将其设置为 0 是否已优化）。还值得注意的是，我认为您可以执行 Snap(Elemento) 而不是访问 id，这不会对速度产生任何影响，就像轻微的代码优化一样。

标签： javascript jquery animation svg snap.svg

【解决方案1】：

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

现在流畅了很多。

从这里：

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

到这里：

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

【讨论】：