动画 .GIF 与 Spritesheet + JS/CSS [英] Animated .GIF vs Spritesheet + JS/CSS

问题描述

哪个对性能、文件大小(和我的理智)的缩放效果最好:动画 .gif 或带有动画的 spritesheet 使用 CSS(和 JS 在需要时)?

文件大小

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

在我看来，这里的主要优势在于 Spritesheets，因为我可以在一张纸上包含多个动画(我们在这里讨论的是数百个动画精灵).根据(根据评论编辑图像主机).

我发现了什么:

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

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

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)?

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.

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 .gif file I really can only include one animation since each will likely have a different duration.

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 .gif would need to have all the frames (at least to my knowledge).

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.

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.

On the other hand, animated .gif files are not a cake to make in Photoshop (if you have a better program, please let 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.

My Question (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 .gif files built from spritesheets, or simply using CSS and the spritesheets I already have?

Examples

VS

解决方案

As I was curious, I implemented it in javascript.

JsFiddle demo (edited image host as per comments).

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...

More info in the JsFiddle demo page.

这篇关于动画 .GIF 与 Spritesheet + JS/CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！