JavaScript 来控制图像动画? [英] JavaScript to control image animation?

问题描述

我想在页面上有一个动画角色，为不同的行为提供不同的动画.我目前有两个关于它如何工作的想法:

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:将每个行为作为动画 GIF 并在切换行为时使用 JavaScript 来切换 GIF 文件.好处:动画在图像本身中，为 JS 留下更少的工作.缺点:JavaScript 无法(据我所知)告诉 GIF 处于哪个帧，动画何时结束/循环等.

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:将每个动画的每一帧作为一个 PNG 图像，并使用 JS 在帧之间切换，并使用一些预加载器来确保在动画开始之前所有图像都准备就绪.好处:对动画序列有更多的控制.缺点:很多帧...

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...

这两个想法哪个更好?(顺便说一句，我想避免为此使用 Flash)
我自己倾向于想法 2，因为它提供了更好的控制.由于该站点已经有一个每 50 毫秒运行一次的计时器，因此将这个动画添加到该计时器系统中并不多.

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.

推荐答案

我知道这已经过时了，但我会给出选项 3，它与选项 2 类似，但略有不同.

I know this is old but I'd give option 3, which is something similar to option 2 with a twist.

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

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.

加号

• 对动画和帧的良好控制
• 可能比加载或切换图像更快
• 您不必创建到服务器的多个连接来加载所有动画
• Png 为您提供比 gif 更好的 alpha 效果

减号

• 你必须自己处理所有的动画

这篇关于JavaScript 来控制图像动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！