改善无限滚动动画的性能

Question

我有很长的带有svg图标的元素列表（60-70个元素），我想对其进行动画处理，使其看起来像是无限滚动。我正在使用animejs库并对包含所有元素的translateY组的g属性进行动画处理。可以，但是性能不是很好。我已经将will-change: transform CSS属性用于正在动画的g标签。我仅对单个translateY转换进行动画处理，为什么性能如此差？如何提高性能？

我可以尝试只包含覆盖屏幕所需的元素，然后为这些元素设置动画。但这将需要不断更改来自屏幕外的元素的“ src”属性，我觉得这甚至会更慢。 我应该用png替换SVG图标吗？我觉得这不应该影响动画性能。 不幸的是，我无法使用CSS动画，因为我需要将此动画与页面上的其他某些动画同步。

    let initialOffset = 0;
    let currentOffset = 0;
    anime({
        target: '.group-of-boxes',
        duration: 1000,
        easing: 'linear',
        loop: true,
        loopBegin: function(anim) {
            initialOffset = currentOffset;
        },
        update: function(anim) {
            const d = 100 * anim.progress / 100;
            currentOffset = clipOffset(initialOffset + d, object);
            anime.set(target , {
                translateY: currentOffset
            });
        }
    });