jquery - 在jquery中处理大约100帧动画的最佳方法

Question

我需要一个带有大约 100 帧动画徽标的页面。我想知道使用图像交换技术（每 x 秒更改一次图像）是否可行，还是由于帧数不推荐？使用视频是下一个最佳选择吗？只是想知道哪种方式是最好的表现方式。谢谢！

Answer 1

我认为spritely这对你来说是最好的选择，因为代码很短并且完成了。

从文档中：

Spritely是一个简单的插件，只有两个关键方法，sprite()这两个方法pan()都只是为元素的 background-image css 属性设置动画。两者的区别在于一幅'sprite'图像包含两个或多个'frames'动画，而一幅'pan'图像包含一个连续的图像，它向左或向右平移然后重复。通常，在任何一种情况下，您都会为此使用 png 文件（有或没有透明度）。

You might wish to use a transparent gif for Internet Explorer 6，尽管它可能看起来不太好。您的 html 元素必须已经是您希望 sprite 出现的正确大小，但背景图像通常会大于 html 元素，并且 spritely 方法会在 html 元素中重新定位背景图像。

他们正在使用此图像制作动画：

这是触发代码：

$('#bird').sprite({fps: 12, no_of_frames: 3});

要使鼠标在单击屏幕时吸引精灵，请使用以下命令：

$('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();
$('body').flyToTap();

你可以在这里找到更多：http ://www.spritely.net/documentation/

Answer 2

您将支持哪些浏览器？图像会以某种方式透明吗？

如果您只支持最新的浏览器，您可以使用带有精灵图像和CSS3 动画的精灵动画。

如果您想支持所有浏览器并且图像不必是透明的，您可以制作一个 gif。

然后还有两种使用javascript的方法。一种是您提到的交换图像的方式，另一种就像@MrXenotype 所说的那样，即使用精灵图像。这可以通过两种方式完成。一种是使用精灵图像作为背景图像并使用 JS 更改背景位置。另一个就像他说的那样，将精灵图像层移动到“查看矩形”中。