我想在页面上有一个动画角色，为不同的行为提供不同的动画。我目前有两个想法，它可以如何工作：JavaScript来控制图像动画？
IDEA 1：将每个行为都视为动画GIF，并在切换行为时使用JavaScript切换GIF文件。上行：动画在图像本身中，为JS留下更少的工作。下滑：JavaScript没有办法（我知道）告诉GIF在什么帧，当动画结束/循环等。
IDEA 2：将每个动画的每个帧作为PNG图像并使用JS在帧之间切换，使用一些预加载器以确保在动画开始之前所有图像都准备就绪。上行：更多地控制动画序列。下行：很多帧...
这两个想法哪个更好？ （我想避免使用Flash这个，顺便说一句）
我倾向于想法2我自己，为了更好的控制它提供。由于该网站已经有一个计时器每50ms运行一次，因此将该动画添加到该计时器系统并不多。
我知道这是旧的，但我会给选项3，这是类似的选项2有一个转折。
不是加载框架，你必须加载一个大的spritemap与所有帧和可能的所有动画+坐标的地图。您将精灵作为使用正确维度的div的背景。您必须将背景图像移动到正确的框架。
您可以将不同行上的所有事件和不同列上的每个动画帧组合在一起。这将使您可以轻松控制的网格。
加
减
想法1将无法工作，因为JavaScript无法控制动画GIF的当前帧 - 既不跨浏览器，也不使用我所知的某些特定（ActiveX/Mozilla特定）扩展名。
我认为你只剩下Idea 2了。但我不知道你用这种方法能达到的结果有多平滑 - 但你必须测试。
好吧 - 我主要是在寻找确认没有办法控制GIF。谢谢:) – 2010-11-26 16:30:22
对于想法1，您可以使用setTimeOut()方法在GIF进行循环的时间长度后触发事件。但是，问题在于GIF可能会在与JavaScript不同的时间启动。
就我个人而言，我会去做主意2;只要帧相对较小，客户端就会很快下载所有图像（一个16x16像素的PNG是〜500字节）。客户端计算机在移动帧时没有问题。
另一个想法是将所有帧放在一个长的图像中，并使用CSS和jQuery（或vanilla JavaScript）每50ms更改CSS background-position属性。这意味着更小的图像和更少的编码。
你可能想看看freezeframe.js处理所有的动画。它使用画布元素从GIF中提取第一帧以便暂停它。
你刚刚回答了你自己的问题。 – galambalazs 2010-11-26 16:23:18
我在问哪个_actually_好些，我在问我的意见是对的还是错的，以及是什么原因。 – 2010-11-26 16:24:45
另请参见[你可以用Javascript控制GIF动画？]（https://stackoverflow.com/questions/2385203/can-you-control-gif-animation-with-javascript） – user 2016-11-01 02:52:50