如何解决基于滚动的图像序列动画更加流畅
我想要具有这样的图像序列的基于滚动的动画：
当访问上面的链接时，向下滚动时请参阅第3节，海滩图像从白天移到晚上。该动画似乎滚动流畅。我的动画在本地平滑滚动，当我在服务器上放置相同的代码时，图像在滚动时断断续续。在滚动条上无法顺利工作。那我现在该怎么办？请帮助我.....在此先谢谢....下面是我的代码....
path// define images
var images = [
"imgs/0001/0001-compress2.jpg","imgs/0001/0002-compress2.jpg","imgs/0001/0003-compress2.jpg","imgs/0001/0004-compress2.jpg","imgs/0001/0005-compress2.jpg","imgs/0001/0006-compress2.jpg","imgs/0001/0007-compress2.jpg","imgs/0001/0008-compress2.jpg","imgs/0001/0009-compress2.jpg","imgs/0001/0010-compress2.jpg","imgs/0001/0011-compress2.jpg","imgs/0001/0012-compress2.jpg","imgs/0001/0013-compress2.jpg","imgs/0001/0014-compress2.jpg","imgs/0001/0015-compress2.jpg","imgs/0001/0016-compress2.jpg","imgs/0001/0017-compress2.jpg","imgs/0001/0018-compress2.jpg","imgs/0001/0019-compress2.jpg","imgs/0001/0020-compress2.jpg","imgs/0001/0021-compress2.jpg","imgs/0001/0022-compress2.jpg","imgs/0001/0023-compress2.jpg","imgs/0001/0024-compress2.jpg","imgs/0001/0025-compress2.jpg","imgs/0001/0026-compress2.jpg","imgs/0001/0027-compress3.jpg","imgs/0001/0028-compress3.jpg","imgs/0001/0029-compress3.jpg","imgs/0001/0030-compress3.jpg","imgs/0001/0031-compress3.jpg","imgs/0001/0032-compress3.jpg","imgs/0001/0033-compress3.jpg","imgs/0001/0034-compress3.jpg","imgs/0001/0035-compress3.jpg","imgs/0001/0036-compress3.jpg","imgs/0001/0037-compress3.jpg","imgs/0001/0038-compress3.jpg","imgs/0001/0039-compress3.jpg","imgs/0001/0040-compress3.jpg","imgs/0001/0041-compress3.jpg","imgs/0001/0042-compress3.jpg","imgs/0001/0043-compress3.jpg","imgs/0001/0044-compress3.jpg","imgs/0001/0045-compress3.jpg","imgs/0001/0046-compress3.jpg","imgs/0001/0047-compress3.jpg","imgs/0001/0048-compress3.jpg","imgs/0001/0049-compress3.jpg","imgs/0001/0050-compress3.jpg","imgs/0001/0051-compress3.jpg","imgs/0001/0052-compress3.jpg","imgs/0001/0053-compress3.jpg","imgs/0001/0054-compress3.jpg","imgs/0001/0055-compress3.jpg","imgs/0001/0056-compress3.jpg","imgs/0001/0057-compress3.jpg","imgs/0001/0058-compress3.jpg","imgs/0001/0059-compress3.jpg","imgs/0001/0060-compress3.jpg","imgs/0001/0061-compress3.jpg","imgs/0001/0062-compress3.jpg","imgs/0001/0063-compress3.jpg","imgs/0001/0064-compress3.jpg","imgs/0001/0065-compress3.jpg","imgs/0001/0066-compress3.jpg","imgs/0001/0067-compress3.jpg","imgs/0001/0068-compress3.jpg","imgs/0001/0069-compress2.jpg","imgs/0001/0070-compress3.jpg","imgs/0001/0071-compress3.jpg","imgs/0001/0072-compress2.jpg","imgs/0001/0073-compress3.jpg","imgs/0001/0074-compress3.jpg","imgs/0001/0075-compress3.jpg","imgs/0001/0076-compress2.jpg","imgs/0001/0077-compress2.jpg","imgs/0001/0078-compress2.jpg","imgs/0001/0079-compress3.jpg","imgs/0001/0080-compress3.jpg"
];
// 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: 0,// repeat 3 times
immediateRender: true,// load first image automatically
ease: Linear.easeNone,// show every image the same amount of time
onUpdate: function () {
$("#myimg").attr("src",images[obj.curImg]); // set the image source
}
}
);
// init controller
var controller = new ScrollMagic.Controller();
// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#trigger",duration: 800})
.setTween(tween)
.addTo(controller);
解决方法
滚动时，您正在排队要加载的图像（可能很多），将其加载到下一个requestAnimationFrame上，这就是为什么它可以在本地运行，而不能在服务器上运行的原因。
其中一些图像相当大（体育场的图像每个约为150kB，您似乎有300多个）。页面总大小约为65MB。
可尝试的东西：
在初始化滚动器之前预加载图像。
减少图像数量，也许减少图像尺寸。
尝试使用webP图像以减小其大小。
使用香草JS设置图像源，而不是jQuery。
使用浏览器开发工具（“网络”和“性能”选项卡）检查瓶颈所在。将限制设置为3g可能会有所帮助，以便您可以在本地版本上测试性能。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。