在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元素必须已经是您希望精灵显示的正确大小，但背景图像通常会大于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 Animation的精灵动画。

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

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