JavaScript 控制图像动画？
我想在页面上有一个动画角色，对于不同的行为有不同的动画。目前我对它的工作原理有两个想法：
想法 1：将每个行为作为动画 GIF，并在切换行为时使用 JavaScript 来切换 GIF 文件。优点：动画位于图像本身中，减少了 JS 的工作量。缺点：（据我所知）JavaScript 无法告诉 GIF 位于哪一帧、动画何时结束/循环等。
想法 2：将每个动画的每一帧都作为 PNG 图像，并使用 JS 在帧之间切换，使用一些预加载器来确保所有图像在动画开始之前准备就绪。优点：对动画序列有更多的控制。缺点：很多框架...
这两个想法哪个更好？ （顺便说一句，我想避免使用 Flash）
我自己倾向于想法 2，因为它提供了更好的控制。由于该站点已经有一个每 50 毫秒运行一次的计时器，因此将此动画添加到该计时器系统中并不需要太多。
I'd like to have an animated character on the page, with different animations for different behaviours. I currently have two ideas for how it could work:
IDEA 1: Have each behaviour as an animated GIF and use JavaScript to switch GIF files when switching behaviour. Upside: Animations are in the image itself, leaving less work for JS. Downside: No way (that I know of) for JavaScript to tell what frame the GIF is at, when the animation ends/loops, etc.
IDEA 2: Have each frame of each animation as a PNG image and use JS to switch between frames, with some preloader to ensure all images are ready before animation begins. Upside: Much more control over animation sequence. Downside: Lots of frames...
Which of these two ideas would be better? (I'd like to avoid using Flash for this, btw)
I'm leaning towards idea 2 myself, for the better control it offers. Since the site already has a timer running every 50ms, it wouldn't be much to add this animation to that timer system.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我知道这已经过时了，但我会给出选项 3，它与选项 2 类似，但有所不同。
您不必加载帧，而是必须加载包含所有帧的大精灵图，并且可能还加载所有动画+坐标的地图。您可以使用正确的尺寸将精灵作为 div 的背景。您只需将背景图像移动到正确的框架即可。
您可以将所有事件放在不同的行上，并将每个动画帧放在不同的列上。这将形成一个您可以轻松控制的网格。
加
减
I know this is old but I'd give option 3, which is something similar to option 2 with a twist.
Instead of loading frames, you'd have to load a big spritemap with all frames and possibly a map of all animation + coordinates. You'd have the sprite as a background for a div using the right dimension. You'd have to just move the background image to the right frame.
You could have all event on a different line and each animation frames on a different column. This will make a grid that you can easily control.
Plus
Minus
想法 1 行不通，因为 JavaScript 无法控制动画 GIF 的当前帧 - 既不能跨浏览器，也不能使用我所知道的某些特定（ActiveX / Mozilla 特定）扩展。
我认为你只剩下想法 2。不过，我不知道用这种方法可以实现的结果有多顺利 - 你必须进行测试。
Idea 1 won't work, as JavaScript has no way of controlling the current frame of an Animated GIF - neither across browsers, nor using some specific (ActiveX / Mozilla specific) extension that I know of.
I think you are left with Idea 2. I don't know how smooth the results are that you can achieve with this method, though - you'd have to test.
对于想法 1，您可以使用
setTimeOut()方法在 GIF 循环所需的时间长度后触发事件。然而，这样做的问题是 GIF 可能在与 javascript 不同的时间启动。就我个人而言，我会选择想法 2；只要帧相对较小，客户端就会很快下载所有图像（16x16px PNG 约为 500 字节）。客户端计算机移动框架不会有任何问题。
另一个想法是将所有框架放在一个长图像中，并使用 CSS 和 jQuery（或普通 JavaScript）每 50 毫秒更改 CSS
background-position属性。这意味着图像更小，编码也可能更少。For idea 1, you could use the
setTimeOut()method to trigger an event after the length of time the GIF takes to loop. The problem with this, however, is that the GIF may start at a different time to the javascript.Personally, I'd go for idea 2; as long as the frames are relatively small the client will download all the images pretty quickly (a 16x16px PNG is ~500 bytes). The client computer will have no problem moving the frames.
Another idea would be to put all the frames on below each other in one long image, and use CSS and jQuery (or vanilla JavaScript) to alter the CSS
background-positionproperty every 50ms. This would mean a smaller image and maybe a little less coding.您可能需要查看 freezeframe.js。它使用 canvas 元素从 GIF 中提取第一帧以暂停它。
You might want to take a look at freezeframe.js. It uses a canvas element to extract the first frame from a GIF in order to pause it.