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.

2 IDEA：让每个动画作为一个PNG图像的每一帧，并用JS框架之间切换，与一些preloader，以确保所有的图像都准备好动画开始之前。潜在上升空间：在动画序列更多的控制。缺点：大量框架...

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自己，为更好地控制它提供。由于该网站已经有跑每50ms一个计时器，它不会有太大的这个动画添加到定时器系统。

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.

，而不是加载帧，你必须加载一个大spritemap所有帧，并可能地图上的所有动画+坐标。你必须精灵作为使用权方面的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.

加

• 在动画和帧控制好


• 可能比加载速度更快或图像之间进行切换


• 您不必建立多个连接到服务器上加载所有的动画


• 巴为您提供了比GIF更好的阿尔法结果

负

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

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