Question

我有一个序列图像动画，可以滚动显示。它可以完美地作为我在浏览器中从笔记本电脑打开的html页面（本地文件）运行，但是在服务器上的实时网站上却真的很奇怪...

当我打开它在实时网站上查看时，它卡住了，无法切换图像，并且平滑的动画无法像在我的本地主机上那样工作……等。

我在一个序列中有61张图像，也许是因为序列中有大量图像吗？

这是源代码：

<img id="lotus" src="images/lotus-sprite/tile0.png">

JS

    // define images
var images = [];

for(var i = 60; i>=0; i--){
     images.push("images/lotus-sprite/tile"+i+".png");
}


// TweenMax can tween any property of any object. We use this object to cycle through the array
var obj = {curImg: 0};

// create tween
var tween = TweenMax.to(obj, 0.5,
    {
        curImg: images.length - 1,  // animate propery curImg to number of images
        roundProps: "curImg",               // only integers so it can be used as an array index
        repeat: 1,                                  // repeat 3 times
        immediateRender: true,          // load first image automatically
        ease: Linear.easeNone,          // show every image the same ammount of time
        onUpdate: function () {
          $("#lotus").attr("src", images[obj.curImg]); // set the image source
        }
    }
);

// init controller
var controller = new ScrollMagic.Controller();

// build scene
var scene = new ScrollMagic.Scene({offset: 0, duration: 1500})
                .setTween(tween)
                .addTo(controller);

});

服务器上的ScrollMagic Image Sequence动画问题

0 个答案: