动画 .GIF 与 Spritesheet + JS/CSS

Animated .GIF vs Spritesheet + JS/CSS

提问by LoveAndCoding

Which will scale best for performance, file-size, (and my sanity): Animated .gifs or a spritesheet with animations using CSS (and JS when need be)?

哪个将在性能、文件大小（和我的理智）方面扩展得最好： Animated .gifs 或带有动画的 spritesheet 使用 CSS（和 JS 在需要时）？

Filesize

文件大小

So, I'm honestly not sure which will be better here since I don't understand the compression of frames in .gif. My guess would be that they would end up about equal if I can swing it right, but if this is wrong, or if this is a factor for a different reason let me know.

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

The main advantage here, in my mind, goes to Spritesheets as I would be able to include multiple animations on a single sheet (and we're talking hundreds of animated sprites here). And based on one of my previous questions, I know that I can easily pull out a single frame in CSS using image-rect(). Where as with a .giffile I really can only include one animation since each will likely have a different duration.

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

Addendum:Also, some of the animations repeat for a given sprite, so the spritesheet would only have to have one copy of the frames, where as a .gifwould need to have all the frames (at least to my knowledge).

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

Performance

表现

Guessing here again, my intuition tells me that animated .gifs are going to be significantly faster as I won't have to manage all the animations at the same time I'm doing a lot of JS code for other things. But, I don't know for sure, maybe browsers take a significant hit with 30+ animated .gifs.

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

My Sanity

我的理智

The spritesheets are made for me, so my work would be high in the beginning (writing and animation engine and hand coding one/each sheet). But once written, it is usable for good and a change in a spritesheet requires minimal changes to code.

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

On the other hand, animated .giffiles are not a cake to make in Photoshop (if you have a better program, pleaselet me know). And each one must be hand made and is a long process. But, once they are made, I don't really have to change them. My spritesheets aren't likely to change very quickly, so chances are it will be a one and done.

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

My Question (tl;dr)

我的问题（tl;dr）

Which is going to scale better to the hundreds of animations in terms of filesize (including HTTP header transfer as it will go over the web), performance in modern browsers, and ease of creation (lowest priority, but if you can make my job easier, or argue to this, I would be grateful), Animated .giffiles built from spritesheets, or simply using CSS and the spritesheets I already have?

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

Examples

例子

VS

VS

采纳答案by Camilo Martin

As I was curious, I implemented it in javascript.

出于好奇，我在 javascript 中实现了它。

JsFiddle demo(edited image host as per comments).

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

What I found out:

我发现了什么：

• It works! And better than expected.
• The CPU usage is actually low (did not test it in IE6 dinosaur and I'm sure it would require "fixes").
• The size can be cut off, and/or quality can be increased, significantly (source-dependent).
• Unlike Mikey G.'s concept, this works even if you zoom in/out (try it in both).
• It allows variable frame duration just like a gif.
• With more work, it could even have a player-like API (pause/resume, fastforward, skip, etc...).
• Leverages other formats: 8-bit alpha PNG, progressive JPEG, <canvas>, SVG, WebP...

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

More info in the JsFiddle demo page.

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

回答by chrisallick

Just wanted to weigh in on this. There are many scenarios in which you have multiple animations on one page. In the scenario of having multiple animations on the same page that are interactive. It is better to use a sprite sheet with CSS animations than gifs. Here are my demos:

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

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

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

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

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

as you can see the sprite version handles the roll overs with ease while the GIF based version kurchunks to a halt.

正如您所看到的，精灵版本可以轻松处理翻转，而基于 GIF 的版本会停止。

Again, this is just one scenario, but thought it might be useful. Also it acts as a good code snippet.

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

Thank.

谢谢。

回答by Zenexer

Update:

更新：

In the time since I first posted this, I've had better luck getting sprite sheet animations to work in browsers. Have browsers/computers improved, or was I just doing it wrong? I have no idea. Either way, this answer is a bit obsolete, but I'll leave it here for historical purposes. There are better, newer answers that are more relevant today.

自从我第一次发布这篇文章以来，我有更好的运气让精灵表动画在浏览器中工作。浏览器/计算机是否有所改进，还是我做错了？我不知道。无论哪种方式，这个答案都有些过时，但出于历史目的，我将其留在这里。有更好的、更新的答案，今天更相关。

---

---

GIFs work quite well with GPU acceleration, since the partial frame updates mean that only a portion pixels need to be redrawn. Unlike GPUless drawing, the browser doesn't have to redraw all the pixels each frame. With a sprite sheet, you're forcing the latter anyway, since you're not overlapping mostly-transparent layers. Therefore, GIFs are definitely going to give you better performance, especially in modern browsers.

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

GIFs obviously have the downside of being limited to 256 colors, but based on your sample, that shouldn't be an issue. However, if you use sprite sheets, it will certainly become an issue, and you won't be able to use a GIF. This means worse compression, most likely. Since you have large areas of solid color, lots of repetition horizontally, and few colors in any given area, you will greatly benefit from GIF's implementation of Lempel-Ziv(-Welch)compression.

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

回答by Mikey G

I'd take a look at this:

我想看看这个：

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

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

I personally think you'd be crazy to use a spritesheet, but i guess it depends on how many animated gifs you'd have to bring over otherwise

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

I don't know what your limitations are, but here's a fiddle using CSS3 step()to animate a spritesheet:

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

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

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

回答by monzonj

Animated gifs only give you binary transparency (a pixel is transparent or totally opaque). That's why most animated gifs look bad on transparent backgrounds because you cannot apply antialiasing (like your squirrel, some antialiasing there would do wonders).

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

If you want to have PNG-24 transparency quality you have to go with animated sprites.

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

Also, animaged sprites performs really well if you draw them on a canvas. Look this: http://seb.ly/demos/bunnybench/bunnies_canvas.html

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

回答by Dave Griffin

One other issue related to CSS sprites, at least in the current browsers, is scaling "jitter". You can scale the GIF file to whatever size you need (presumably smaller), but if you try to scale the CSS sprite you run into jitter because of rounding errors (background-position is based on the the scaled coordinates, not the original). If someone knows another way of handling scaled animated sprites, that would be great to know.

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

ImageMagick does a great job of creating animated GIFs or sprites.

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

回答by aaaaaaaaaaaa

Gif animations can repeat sprites, they can also use partial frame updates, and positioning the same sprite at different positions. If you simply want to display a non-interactive animation I'd say animated gifs have all the advantages, except for colour, you are forced to use a 256 colour palette.

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

I remember using Microsoft GIF Animator, that is certainly easy to use. I don't know anything about Photoscape, but word on the net is that that is a good slightly more heavy alternative.

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

回答by Sotkra

If you're talking hundreds of sprites, then go with .gif. The more complex the animation, the more animations there is, the higher the load on the browser since more resources will be utilized to render the animation 'slide by slide' rather than just letting the animated .gif itself play.

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

This gets worse when you take into consideration cross-browser compatibility where, as always, IE fails big time. I've never seen a site choke on lots of small .gifs but I see sites choke on simple javascript all the time. I can only imagine how bad it would get with hundreds of css/js animated images flipping all the time.

当您考虑跨浏览器兼容性时，情况会变得更糟，在这种情况下，IE 总是失败。我从来没有见过一个网站因为很多小的 .gif 文件而被卡住，但我看到网站一直被简单的 javascript 卡住。我只能想象数百个 css/js 动画图像一直在翻转会变得多么糟糕。

If you don't mind me asking, what kind of site are these animations meant for? Is it some sort of animations portfolio or...?

如果你不介意我问一下，这些动画是为什么样的网站设计的？是某种动画作品集还是……？