动画.GIF vs Spritesheet + JS / CSS

本文介绍了动画.GIF vs Spritesheet + JS / CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

这将最好的性能，文件大小，（和我的健全）缩放：动画 .gif s或spritesheet动画使用CSS（和JS，当需要）

文件大小

所以，我真的不知道哪一个会更好， t理解 .gif 中框架的压缩。我的猜测是，如果我可以摆动它们，他们会结束大约相等，但如果这是错误的，或者如果这是一个因素不同的原因让我知道。

这里的主要优点，在我心中，去到Spritesheets，因为我可以在一个单一的表中包括多个动画（我们在这里谈论数百个动画精灵）。根据 （根据评论编辑图片主持人）。

我发现了什么：

• CPU使用率实际上是低的（没有在IE6恐龙测试，我相信它需要修复）。
• 大小可以被截断，和/或质量可以显着增加（源依赖）。
• 与 Mikey G.的概念，即使放大/缩小也可以工作。
• 它允许可变帧持续时间
• 更多的工作，甚至可以有类似播放器的API（暂停/恢复，快进，跳过等等）。
• 利用其他格式：8位Alpha PNG，渐进式JPEG，< canvas> ，SVG， WebP ...

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

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.