37

哪个最适合性能，文件大小（和我的理智）：动画.gifs或使用CSS（和JS在需要时）动画的spritesheet？

文件大小

所以，老实说，我不确定哪个会更好，因为我不了解.gif. 我的猜测是，如果我能正确挥杆，他们最终会大致相等，但如果这是错误的，或者这是出于不同原因的一个因素，请告诉我。

在我看来，这里的主要优势在于 Spritesheets，因为我可以在一张纸上包含多个动画（我们在这里讨论的是数百个动画精灵）。根据我之前的一个问题，我知道我可以使用image-rect(). 与.gif文件一样，我真的只能包含一个动画，因为每个动画可能有不同的持续时间。

附录：此外，某些动画会针对给定的精灵重复，因此精灵表只需要拥有一个帧副本，而 a.gif则需要拥有所有帧（至少据我所知）。

表现

再次猜测，我的直觉告诉我，动画.gifs 会明显更快，因为我不必同时管理所有动画，因为我正在为其他事情做很多 JS 代码。但是，我不确定，也许浏览器会受到 30 多个动画.gif的重大影响。

我的理智

spritesheets 是为我制作的，所以我的工作一开始会很高（写作和动画引擎以及手工编码一个/每张表）。但是一旦编写好，它就可以很好地使用，并且对精灵表的更改只需要对代码进行最少的更改。

另一方面，.gif在 Photoshop 中制作动画文件并不是小菜一碟（如果您有更好的程序，请告诉我）。而且每一个都必须手工制作，是一个漫长的过程。但是，一旦它们被制作出来，我真的不需要改变它们。我的 spritesheets 不太可能很快改变，所以很有可能它会完成。

我的问题 (tl;dr)

在文件大小（包括通过网络传输的 HTTP 标头传输）、现代浏览器中的性能和易于创建（最低优先级，但如果你能让我的工作更轻松的话）这将更好地扩展到数百个动画，或者对此提出异议，我将不胜感激），.gif从 spritesheets 构建的动画文件，还是仅使用 CSS 和我已经拥有的 spritesheets？

例子

动画精灵（60 帧）VS与 spritesheet 相同的动画

4

8 回答 8

17

我很好奇，我用javascript实现了它。

JsFiddle 演示（根据评论编辑图像主机）。

我发现了什么：

  • 有用！并且好于预期。
  • CPU 使用率实际上很低（没有在 IE6 恐龙中测试它，我相信它需要“修复”）。
  • 尺寸可以被切断，和/或质量可以显着提高（取决于来源）。
  • 与Mikey G. 的概念不同，即使您放大/缩小（两者都尝试），这也有效。
  • 它允许像 gif 一样可变帧持续时间。
  • 通过更多的工作，它甚至可以拥有类似播放器的 API（暂停/恢复、快进、跳过等）。
  • 利用其他格式：8 位 alpha PNG、渐进式 JPEG <canvas>、、SVG、WebP ...

JsFiddle 演示页面中的更多信息。

于 2012-04-13T11:10:29.103 回答
15

只是想权衡一下。在许多情况下，您在一页上有多个动画。在同一页面上有多个交互动画的场景中。使用带有 CSS 动画的精灵表比使用 gif 更好。这是我的演示：

http://clubsexytime.com/projects/eyetracker_gif/

http://clubsexytime.com/projects/eyetracker_sprite/

如您所见，精灵版本轻松处理翻转，而基于 GIF 的版本 kurchunks 停止。

同样，这只是一种情况，但认为它可能有用。它也可以作为一个很好的代码片段。

谢谢。

于 2014-07-21T14:52:25.163 回答
9

更新：

自从我第一次发布这篇文章以来，我一直很幸运能够让精灵表动画在浏览器中工作。浏览器/计算机有改进，还是我做错了？我不知道。不管怎样，这个答案有点过时了，但出于历史目的，我会把它留在这里。今天有更好，更新的答案更相关。

GIF 与 GPU 加速配合得很好，因为部分帧更新意味着只有部分像素需要重绘。与无 GPU 绘图不同，浏览器不必每帧重绘所有像素。使用精灵表，无论如何你都在强制后者，因为你没有重叠大部分透明的图层。因此，GIF 肯定会为您提供更好的性能，尤其是在现代浏览器中。

GIF 显然有限制为 256 色的缺点，但根据您的示例，这应该不是问题。但是，如果您使用精灵表，它肯定会成为一个问题，并且您将无法使用 GIF。这很可能意味着更糟糕的压缩。由于您有大面积的纯色，大量的水平重复，并且任何给定区域的颜色很少，您将极大地受益于 GIF 的Lempel-Ziv(-Welch)压缩实现。

于 2012-02-10T01:50:55.603 回答
5

我会看看这个：

http://adamducker.com/blog/7/animated-gif-for-css-sprites/

我个人认为使用 spritesheet 会很疯狂，但我想这取决于你必须带来多少动画 gif，否则

我不知道你的限制是什么，但这里有一个使用 CSS3step()为 spritesheet 设置动画的小提琴：

http://jsfiddle.net/simurai/CGmCe/

于 2012-02-04T10:27:11.680 回答
2

动画 gif 只为您提供二进制透明度（一个像素是透明的或完全不透明的）。这就是为什么大多数动画 gif 在透明背景上看起来很糟糕，因为你不能应用抗锯齿（就像你的松鼠一样，那里的一些抗锯齿会产生奇迹）。

如果你想拥有 PNG-24 透明度质量，你必须使用动画精灵。

此外，如果您在画布上绘制动画精灵，它们的表现会非常好。看这个：http ://seb.ly/demos/bunnybench/bunnies_canvas.html

于 2013-07-09T16:09:43.220 回答
1

Gif 动画可以重复精灵，它们也可以使用部分帧更新，并将相同的精灵定位在不同的位置。如果您只是想显示非交互式动画，我会说动画 gif 具有所有优点，除了颜色之外，您必须使用 256 调色板。

我记得使用过Microsoft GIF Animator，这当然很容易使用。我对Photoscape 一无所知，但网上的消息是，这是一个稍微重一点的好选择。

于 2012-02-04T11:03:56.870 回答
1

至少在当前浏览器中，与 CSS 精灵相关的另一个问题是缩放“抖动”。您可以将 GIF 文件缩放到您需要的任何大小（可能更小），但是如果您尝试缩放 CSS 精灵，您会因为舍入错误而遇到抖动（背景位置基于缩放坐标，而不是原始坐标）。如果有人知道另一种处理缩放动画精灵的方法，那就太好了。

ImageMagick 在创建动画 GIF 或精灵方面做得很好。

于 2013-02-11T22:42:45.140 回答
0

如果您说的是数百个精灵，那么请使用 .gif。动画越复杂，动画越多，浏览器的负载就越高，因为将使用更多资源来“逐张滑动”地渲染动画，而不仅仅是让动画 .gif 本身播放。

当您考虑到跨浏览器兼容性时，情况会变得更糟，IE 一如既往地失败了。我从未见过一个网站因大量的小 .gif 文件而窒息，但我看到网站一直因简单的 javascript 而窒息。我只能想象数百个 css/js 动画图像一直在翻转会变得多么糟糕。

如果您不介意我问，这些动画适用于什么样的网站？是某种动画作品集还是……？

于 2012-02-09T21:59:31.440 回答