动画.GIF vs精灵表+JS/CSS

对于性能、文件大小(以及我的理智性),哪一个缩放效果最好:动画.gifs还是带有CSS动画的精灵表(需要时还有JS)

文件大小

因此,老实说,我不确定这里哪一个更好,因为我不了解.gif中的帧压缩。我的猜测是,如果我能把它摆对的话,它们最终会差不多相等,但如果这是错误的,或者如果这是一个原因不同的因素,请让我知道

在我看来,这里的主要优势在于SpriteSheet,因为我可以在一张纸上包含多个动画(我们这里说的是数百个动画sprites)。基于我之前的一个问题,我知道我可以使用image-rect()轻松地在CSS中提取单个帧。其中,对于.gif文件,我实际上只能包含一个动画,因为每个动画的持续时间可能不同

附录:此外,某些动画会对给定的精灵重复,因此精灵表只需有一个帧副本,而作为.gif则需要所有帧(至少据我所知)

演出

再次猜测一下,我的直觉告诉我,动画.gifs将大大加快速度,因为我不必同时管理所有动画,因为我正在为其他事情编写大量JS代码。但是,我不确定,也许浏览器会因为30多个动画.gifs而大受欢迎

我的理智

spritesheets是为我制作的,所以我的工作在一开始会很高(写作和动画引擎,手工编码一张/每张)。但一旦编写完成,它就可以很好地使用,并且在精灵表中进行更改只需要对代码进行最小的更改

另一方面,动画.gif文件不是Photoshop中的蛋糕(如果你有更好的程序,请告诉我)。每一个都必须手工制作,而且是一个漫长的过程。但是,一旦它们被制造出来,我真的不需要改变它们。我的精神状态表不太可能很快改变,所以很有可能是一张就完成了

我的问题(tl;dr)

从文件大小(包括通过web传输的HTTP头传输)、现代浏览器的性能和易于创建(最低优先级,但如果您能让我的工作更轻松,或对此提出异议,我将不胜感激)、动画.gif文件(从SpriteSheet构建)等方面来看,它将更好地扩展到数百个动画,或者仅仅使用CSS和我已经有的精灵表

例子

VS

出于好奇,我用javascript实现了它

jsiddle演示(根据评论编辑图像主机)

我发现:

  • 它起作用了!比预期的要好
  • CPU使用率实际上很低(没有在IE6恐龙中测试它,我相信它需要“修复”)
  • 可以显著地(取决于源)切断尺寸和/或提高质量
  • 与Mikey G.的概念不同,即使你放大/缩小(两种方式都可以尝试),这种方法也能起作用
  • 它允许可变的帧持续时间,就像gif一样
  • 通过更多的工作,它甚至可以有一个类似于API的播放器(暂停/恢复、快进、跳过等等)
  • 利用其他格式:8位alpha PNG、渐进式JPEG、<帆布&gt,SVG,WebP

更多信息请参见JSFIDLE演示页面

发表评论