如何使用 jQuery 为 PNG 序列设置动画（通过滚动或触发动画）[关闭]答案

【问题标题】：How do I animate though a PNG sequence using jQuery (either by scrolling or triggered animation) [closed]如何使用 jQuery 为 PNG 序列设置动画（通过滚动或触发动画）[关闭]
【发布时间】：2012-03-29 00:20:13
【问题描述】：

我越来越多地看到一种效果，即 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

【问题讨论】：

标签： jquery animation sequence parallax

【解决方案1】：

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

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

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

更新

或者使用plugin

【讨论】：

是的，关于 spritely 的事情是图像序列实际上是一个大图像，正在移动以创建动画。我真的不认为这适用于更大更复杂的图像序列。
是的，文件会很大。
嗯，累积起来可能比所有单个图像都小

【解决方案2】：

也许不是在不同的图像之间切换，而是使用这个问题中描述的精灵技术：How to show animated image from PNG image using javascript? [ like gmail ]

【讨论】：

我还没有代表对其他答案发表评论，但针对文件大小问题：如果您无论如何都必须加载所有图像，那么您已经承诺发送数据 - 通过将图像捆绑到一个 sprite 中，您至少可以节省 HTTP 开销。您还可以在图像加载后立即启动动画，而不必单独检查所有图像。
这可能是真的，但我认为它不是最佳的还有其他原因。在 10,000 x 10,000 的图像周围移动比在 div 中切换可见性或交换图像名称要昂贵得多...
您必须权衡文件大小与 HTTP 请求的数量。如果您的图像不必完全透明，您可以将它们拆分成一个大的 JPEG....但是如果它们需要是 PNG-24 的，那么将它们组合在一起会变得非常大。 HTTP 请求可能更值得。