使用重（超过 400kb）svg 作为动画背景（使用 css3）答案

【问题标题】：Use heavy (more that 400kb) svg as animated background (with css3)使用重（超过 400kb）svg 作为动画背景（使用 css3）
【发布时间】：2015-12-16 10:01:05
【问题描述】：

我有长（超过 1500 像素）和沉重（超过 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 - 我将大的 SVG 图像分成 20 个小块，将这些小块放在 <ul> 中并使用 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();

【问题讨论】：

你能准备一个jsFiddle吗？

标签： javascript jquery css svg gsap

【解决方案1】：

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

【讨论】：

【解决方案2】：

在 TweenLite 动画中，使用属性x 和y 代替left 和top，并启用force3D。

您的选项对象应如下所示： {x: xVal, force3D: true, ease:Linear.easeNone}

【讨论】：