JavaScript 控制图像动画？答案

【问题标题】：JavaScript to control image animation?JavaScript 控制图像动画？
【发布时间】：2011-05-16 06:33:43
【问题描述】：

我想在页面上有一个动画角色，针对不同的行为使用不同的动画。我目前对它的工作方式有两个想法：

IDEA 1：将每个行为作为动画 GIF，并在切换行为时使用 JavaScript 切换 GIF 文件。好处：动画在图像本身，为 JS 留下更少的工作。缺点：JavaScript 无法（据我所知）告诉 GIF 在哪一帧，动画何时结束/循环等。

IDEA 2：将每个动画的每一帧都作为PNG图像，并使用JS在帧之间切换，并带有一些预加载器以确保在动画开始之前所有图像都准备好。好处：对动画序列的更多控制。缺点：很多帧...

这两个想法中哪一个更好？（顺便说一句，我想避免使用 Flash）
我自己倾向于想法 2，以便更好地控制它。由于该站点已经有一个每 50 毫秒运行一次的计时器，因此将该动画添加到该计时器系统中并没有什么太大的意义。

【问题讨论】：

【解决方案1】：

想法 1 不起作用，因为 JavaScript 无法控制动画 GIF 的当前帧 - 既不能跨浏览器，也不能使用我知道的某些特定（ActiveX / Mozilla 特定）扩展。

我认为您只剩下想法 2。不过，我不知道您可以使用这种方法获得的结果有多顺利 - 您必须进行测试。

【讨论】：

【解决方案2】：

对于想法 1，您可以使用 setTimeOut() 方法在 GIF 循环所需的时间长度后触发事件。然而，这样做的问题是 GIF 可能在与 javascript 不同的时间开始。

就个人而言，我会选择想法 2；只要帧相对较小，客户端就会很快下载所有图像（16x16px PNG 约为 500 字节）。客户端计算机移动帧没有问题。

另一个想法是将所有帧放在一个长图像中，并使用 CSS 和 jQuery（或 vanilla JavaScript）每 50 毫秒更改一次 CSS background-position 属性。这意味着图像更小，编码可能更少。

【讨论】：

是的，具有所有不同帧的单个图像是最好的方法。它被称为精灵，是一种众所周知的技术。
我编辑了我的评论以删除链接，因为我并没有真正看到他们是否使用了最好的方法。但是好的，又来了 :) otanistudio.com/swt/sprite_explosions

【解决方案3】：

我知道这很旧，但我会给出选项 3，这与选项 2 类似，但有所不同。

您必须加载一个包含所有帧的大型 spritemap 以及可能包含所有动画 + 坐标的地图，而不是加载帧。您将使用正确的尺寸将精灵作为 div 的背景。您只需将背景图像移动到正确的框架。

您可以将所有事件放在不同的行上，并将每个动画帧放在不同的列上。这将创建一个您可以轻松控制的网格。

加号

减号

【讨论】：

即时获胜。在提出问题时我不知道 spritesheets，另一个“加号”是我只需要一个 onload 事件来触发动画就可以开始了！
我最近不得不做一些类似的事情（3d 旋转房子）。我选择了单个图像，因为拥有 100 个 600x400 图像的精灵可能非常大。使用“new Image()”加载所有图像并将它们添加到数组列表中。然后我只需要使用索引从一个图像移动到另一个图像并更改的 src

【解决方案4】：

您可能想看看freezeframe.js。它使用 canvas 元素从 GIF 中提取第一帧以暂停它。

【讨论】：