动画.GIF与Spritesheet + JS/CSS
Lov*_*ing 30 css performance filesize animated-gif sprite-sheet
哪个将最适合性能,文件大小,(和我的理智):动画.gifs或带有动画的spritesheet使用CSS(和JS需要时)？
文件大小
所以,老实说我不确定哪个会更好,因为我不了解帧的压缩.gif.我的猜测是,如果我可以正确地摆动它们,它们最终会大致相等,但是如果这是错误的,或者这是因为不同的原因让我知道.
在我看来,这里的主要优点是Spritesheets,因为我可以在一张纸上包含多个动画(我们在这里谈论数百个动画精灵).基于我以前的一个问题,我知道我可以轻松地在CSS中使用单个框架image-rect().与.gif文件一样,我实际上只能包含一个动画,因为每个动画可能会有不同的持续时间.
附录:此外,一些动画重复给定的精灵,所以spritesheet只需要有一个帧的副本,其中.gif需要有所有帧(至少据我所知).
性能
在这里再次猜测,我的直觉告诉我,动画.gif的速度会明显加快,因为我不必管理所有的动画,同时我正在为其他事情做很多JS代码.但是,我不确定,也许浏览器会受到30多个动画片.gif的重大影响.
我的理智
spritesheets是为我而制作的,所以我的工作一开始就很高(写作和动画引擎和手工编码一张/每张).但是一旦编写,它就可以正常使用,并且spritesheet中的更改需要对代码进行最少的更改.
另一方面,动画.gif文件不是Photoshop中的蛋糕(如果你有更好的程序,请告诉我).每个人都必须手工制作,这是一个漫长的过程.但是,一旦它们制成,我真的不需要改变它们.我的spritesheets不太可能很快改变,所以很有可能它会成为一个完成.
我的问题(tl; dr)
在文件大小方面,它可以更好地扩展到数百个动画(包括HTTP报头传输,因为它将通过网络传输),现代浏览器中的性能以及易于创建(最低优先级,但如果您可以让我的工作更轻松,或者争论这个,我将不胜感激),.gif从spritesheets构建的动画文件,或者只是使用CSS和我已经拥有的spritesheets？
例子
VS 
Cam*_*tin 16
我很好奇,我用javascript实现了它.
JsFiddle演示(根据评论编辑图像主机).
我发现了什么:
- 有用!并且好于预期.
- CPU使用率实际上很低(没有在IE6恐龙中测试它,我确信它需要"修复").
- 可以切断尺寸,和/或显着提高质量(取决于源).
- 与Mikey G.的概念不同,即使您放大/缩小(在两者中都尝试),这也有效.
- 它允许可变帧持续时间就像一个gif.
- 随着更多的工作,它甚至可以有类似玩家的API(暂停/恢复,快进,跳过等...).
- 利用其他格式:8位alpha PNG,渐进式JPEG
<canvas>,SVG,WebP ......
更多信息在JsFiddle演示页面中.
- @CamiloMartin还有人还支持IE6吗？我们正在考虑放弃对IE9的支持 (2认同)
chr*_*ick 14
只是想对此进行权衡.在许多情况下,您在一个页面上有多个动画.在同一页面上具有多个动画的交互式场景中.使用带有CSS动画的精灵表比使用gif更好.这是我的演示:
http://clubsexytime.com/projects/eyetracker_gif/
http://clubsexytime.com/projects/eyetracker_sprite/
正如你所看到的那样,精灵版可以轻松处理滚动,而基于GIF的版本可以暂停.
同样,这只是一种情况,但认为它可能有用.它也是一个很好的代码片段.
谢谢.
更新:
自从我第一次发布这篇文章以来,我已经有更好的运气,可以在浏览器中使用精灵表动画.是否改进了浏览器/计算机,或者我只是做错了？我不知道.无论哪种方式,这个答案有点过时,但我会把它留在这里用于历史目的.有更好,更新的答案今天更相关.
GIF在GPU加速方面工作得很好,因为部分帧更新意味着只需要重绘一部分像素.与无GPU绘图不同,浏览器不必每帧重绘所有像素.使用精灵表,无论如何都要强制后者,因为你没有重叠透明的层.因此,GIF肯定会为您提供更好的性能,尤其是在现代浏览器中.
GIF显然有限制为256色的缺点,但根据您的样本,这应该不是问题.但是,如果你使用精灵表,它肯定会成为一个问题,你将无法使用GIF.这意味着压缩程度更差,最有可能.由于你有大面积的纯色,大量水平重复,以及任何给定区域的颜色很少,你将从GIF实施Lempel-Ziv(-Welch)压缩中获益匪浅.
我来看看这个:
http://adamducker.com/blog/7/animated-gif-for-css-sprites/
我个人认为你使用spritesheet会很疯狂,但我想这取决于你需要带多少GIF动画否则
我不知道你的局限是什么,但这里有一个小提琴,使用CSS3 step()动画spritesheet:
http://jsfiddle.net/simurai/CGmCe/
- 第一个链接已经死了 (5认同)