如何使用 jQuery 为 PNG 序列设置动画（通过滚动或触发动画）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9669805/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I animate though a PNG sequence using jQuery (either by scrolling or triggered animation)
提问by user379468
More and more I am seeing an effect where pngs are loaded into a series of DIVs (or one div) and then sequenced though frame by frame either based on button click or based on scroll. I've tried to peek at the code, and I understand that javascript is doing the heavy lifting, but I'm still a bit lost, are there any tutorials on this technique? examples?
我越来越多地看到这样一种效果，即 png 被加载到一系列 DIV（或一个 div）中，然后基于按钮单击或基于滚动逐帧排序。我试图偷看代码，我知道 javascript 正在做繁重的工作，但我仍然有点迷茫，有没有关于这种技术的教程？例子？
example of animation (multiple div) http://atanaiplus.cz/index_en.html:
动画示例（多个 div） http://atanaiplus.cz/index_en.html：
example of animation (one div): http://www.hyundai-veloster.eu/
动画示例（一个 div）：http: //www.hyundai-veloster.eu/
example of scrolling animation: http://discover.store.sony.com/tablet/#design/ergonomics
滚动动画示例：http: //discover.store.sony.com/tablet/#design/ergonomics
回答by Mild Fuzz
you just want to swap out the src attribute using a setInterval timer
您只想使用 setInterval 计时器换出 src 属性
var myAnim = setInterval(function(){
$(".myImageHolder").attr('src', nextImage);
}, 42);
The trick is how you generate nextImage. This largely depends on the naming conventions of your images, or which direction you wish the animation to run in
诀窍在于您如何生成nextImage. 这在很大程度上取决于图像的命名约定，或者您希望动画运行的方向
Update
更新
Or use a plugin
或者使用插件
回答by Zugbo
Perhaps instead of switching between different images, use the spriting technique described in this question: How to show animated image from PNG image using javascript? [ like gmail ]
也许不是在不同图像之间切换，而是使用以下问题中描述的精灵技术：如何使用 javascript 从 PNG 图像显示动画图像？[像gmail]
