0

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

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

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

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

$( 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 元素再次相交..

4

1 回答 1

0

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

于 2018-08-12T13:34:10.613 回答