JavaScript 来控制图像动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4286905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript to control image animation?
提问by Niet the Dark Absol
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 1：将每个行为作为动画GIF，并在切换行为时使用JavaScript 来切换GIF 文件。好处：动画在图像本身中，为 JS 留下更少的工作。缺点：JavaScript 无法（据我所知）告诉 GIF 处于哪个帧，动画何时结束/循环等。
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...
IDEA 2：将每个动画的每一帧作为一个PNG图像，并使用JS在帧之间切换，使用一些预加载器来确保在动画开始之前所有图像都准备好了。好处：对动画序列有更多的控制。缺点：很多帧...
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.
这两个想法哪个更好？（我想避免为此使用 Flash，顺便说一句）
我自己倾向于想法 2，因为它提供了更好的控制。由于该站点已经有一个每 50 毫秒运行一次的计时器，因此将这个动画添加到该计时器系统中并不多。
回答by Lo?c Faure-Lacroix
I know this is old but I'd give option 3, which is something similar to option 2 with a twist.
我知道这是旧的，但我会给出选项 3，它与选项 2 类似，但略有不同。
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.
而不是加载帧，你必须加载一个包含所有帧的大精灵图，可能还有所有动画+坐标的地图。您可以使用正确的尺寸将精灵作为 div 的背景。您只需将背景图像移动到正确的框架即可。
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
加
- Good control over animation and frames
- Probably faster than loading or switching between images
- You don't have to create multiple connections to the server to load all animations
- Png gives you better alpha result than gif
- 对动画和帧的良好控制
- 可能比加载或在图像之间切换更快
- 您不必创建到服务器的多个连接来加载所有动画
- Png 为您提供比 gif 更好的 alpha 结果
Minus
减
- You have to handle all the animations by yourself
- 你必须自己处理所有的动画
回答by Pekka
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.
想法 1 行不通，因为 JavaScript 无法控制动画 GIF 的当前帧 - 既不能跨浏览器，也不能使用我所知道的某些特定（ActiveX / Mozilla 特定）扩展。
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.
我认为您只剩下想法 2。我不知道使用这种方法可以获得的结果有多顺利 - 您必须进行测试。
回答by Bojangles
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.
对于想法 1，您可以使用该setTimeOut()方法在 GIF 循环所需的时间长度后触发事件。然而，问题在于 GIF 可能与 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.
就个人而言，我会选择想法 2；只要帧相对较小，客户端就会很快下载所有图像（16x16px PNG 约为 500 字节）。客户端计算机移动帧没有问题。
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.
另一个想法是将所有帧放在一个长图像中，并使用 CSS 和 jQuery（或 vanilla JavaScript）background-position每 50 毫秒更改一次CSS属性。这将意味着更小的图像和可能更少的编码。
回答by Wilfred Hughes
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.
你可能想看看freezeframe.js。它使用画布元素从 GIF 中提取第一帧以暂停它。
