将 svg 动画库 vivus 与交叉点观察器一起使用的最佳方法

Question

我使用 vivus.js 为 SVG 制作动画。我想知道在性能方面，将它与交叉点观察器结合使用的最佳方法是什么。

在我的页面上有几个部分，包括内联 svg。这些 svg 应该在向下滚动页面时进行动画处理，在离开视口时停止并在再次观察容器时重新启动。

它有效，但我不确定这是否是构建 vivus 对象并以这种方式一次又一次地播放它们的最佳方式。 这些解决方案似乎使 Firefox 性能崩溃..

我欢迎所有 cmets、建议和改进建议。

$( document ).ready(function() {
    //Define observed Items
    var myItems = document.querySelectorAll(".observed-item");

    //Define observer Options
    var observeroptions = {
        root: null,
        rootMargin: "-35% 0% -35% 0%",
        threshold: 0,
    };

    //Create new Observer Object
    var observer = new IntersectionObserver(function(entries, observer){
        entries.forEach(function(entry){

//Define Index Variable
var myIndex = $(entry.target).index();


var myvivus = new Vivus("item-svg" + myIndex, {
                    duration: 150,
                    start: 'manual'
                },
                function () {
                   $(entry.target).addClass('callback-item-animation');
                }
            )


            if (entry.intersectionRatio > 0) {

                //Add class to Entry Target
                $(entry.target).addClass("item-animate");
                myvivus.reset().play();

} else {
//Remove animated Class from observed Item
                $(entry.target).removeClass("item-animate");
                myvivus.stop().reset();

            }

        });
    },observeroptions);

    myItems.forEach(function(myItem) {
        observer.observe(myItem);
    });

});

我创造了一支笔：

https://codepen.io/Milenoi/pen/JBxgOG

请注意：没有 Polyfill 可以在 Chrome + Firefox 中使用

如您所见，动画没有按预期工作，svg 动画应该在离开观察者时停止并重新开始 wenn 元素再次相交..

Answer 1

你的提升观察者并在函数中与它发生冲突。在observer =之前添加var或let，然后将该函数中的observer名称更改为唯一的名称。还可以使用窗口限定所有内容。或上下文。这应该会稍微提高性能