javascript - 使用重(超过 400kb)svg 作为动画背景(使用 css3)

Question

我有长(超过 1500px)和重(超过 400kb)的图像，它描述了环境。我正在尝试从左到右制作动画，但动画不流畅，移动非常粗糙。我尝试了不同的方法，所有方法都在下面进行了描述。那么你知道如何解决这个粗略的移动吗？

css3:

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: 15447px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: 15447px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: 15447px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: 15447px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: 15447px 0; }
}

.animation-wrapper { 
    width: 15447px; 
    height: 100%; 
    background-image: url('../pictures/animation-background.svg');
    background-position: 0px 0px;
    background-size: 15447px 800px;
    animation: animatedBackground 100s linear infinite;
    -moz-animation: animatedBackground 100s linear infinite;
    -webkit-animation: animatedBackground 100s linear infinite;
    -ms-animation: animatedBackground 100s linear infinite;
    -o-animation: animatedBackground 100s linear infinite;
}

jQuery - I split big SVG image into 20 small pieces, placed those pieces in <ul> and animated with jQuery:

$(function(){
        var scroller = $('#scroller div.innerScrollArea');
        var scrollerContent = scroller.children('ul');
        scrollerContent.children().clone().appendTo(scrollerContent);
        var curX = 0;
        scrollerContent.children().each(function(){
            var $this = $(this);
            $this.css('left', curX);
            curX += $this.outerWidth(true);
        });
        var fullW = curX / 2;
        var viewportW = scroller.width();

        // Scrolling speed management
        var controller = {curSpeed:0, fullSpeed:4};
        var $controller = $(controller);
        var tweenToNewSpeed = function(newSpeed, duration)
        {
            if (duration === undefined)
                duration = 600;
            $controller.stop(true).animate({curSpeed:newSpeed}, duration);
        };

        // Scrolling management; start the automatical scrolling
        var doScroll = function()
        {
            var curX = scroller.scrollLeft();
            var newX = curX + controller.curSpeed;
            if (newX > fullW*2 - viewportW)
                newX -= fullW;
            scroller.scrollLeft(newX);
        };
        setInterval(doScroll, 20);
        tweenToNewSpeed(controller.fullSpeed);
    });

});

gsap:

var tl = new TimelineMax({repeat:-1}); 
var right = $(".background").width()*20;
$(".animation-wrapper").css("left",-left+"px");
    function backgroundMoveInitiate()
    {
      tl.to(".animation-wrapper", 50, {right: -right,  ease:Linear.easeNone});
    }
backgroundMoveInitiate();

Answer 1

尝试使用 transit.js .语法与 jQuery animate 相同，但它将 jQuery 动画转换为纯 CSS 动画。在我的一个元素中使用滚动全景图像在我的站点中实现 transit.js 时，我发现速度显着提高。