如何使用jQuery（通过滚动或触发动画）为PNG序列设置动画效果

越来越多我看到一个效果，其中png被加载到一系列DIV（或一个div）中，然后逐帧排序，或者基于按钮点击或基于滚动。 我试图查看代码，我知道javascript正在做繁重的工作，但我仍然有点迷失，有没有关于这种技术的教程？ 例子？

动画的例子（多个div） http://atanaiplus.cz/index_en.html ：

动画的例子（一个div）： http ： //www.hyundai-veloster.eu/

滚动动画的示例： http ： //discover.store.sony.com/tablet/#design/ergonomics

Answer 1

您只想使用setInterval计时器替换src属性

var myAnim = setInterval(function(){ $(".myImageHolder").attr('src', nextImage); }, 42); 

诀窍是如何生成nextImage 。 这在很大程度上取决于图像的命名约定，或者您希望动画运行的方向

更新

或者使用插件

Answer 2

也许不是在不同的图像之间切换，而是使用此问题中描述的spriting技术： 如何使用javascript显示来自PNG图像的动画图像？ [比如gmail]