Улучшение производительности анимации бесконечной прокрутки - PullRequest
Новая
       16

Улучшение производительности анимации бесконечной прокрутки

0 голосов
/ 27 июня 2019

У меня есть длинный список элементов с иконками svg (60-70 элементов), и я хочу анимировать его, чтобы он выглядел как бесконечная прокрутка. Я использую библиотеку animejs и анимируемое свойство translateY группы g, которая содержит все элементы. Это работает нормально, но производительность не очень хорошая. Я уже использую атрибут will-change: transform CSS для тегов g, которые анимируются. Я анимирую только одно translateY преобразование, почему производительность такая низкая? Как я могу улучшить производительность?

Я мог бы попытаться использовать только элементы, необходимые для покрытия экрана, а затем анимировать эти элементы. Но это потребовало бы постоянно меняющегося атрибута "src" элементов, которые появляются за кадром, и я чувствую, что это будет еще медленнее. Должен ли я заменить иконки SVG на png? Я чувствую, что это не должно влиять на производительность анимации. К сожалению, я не могу использовать 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
            });
        }
    });
...