为什么不动画GIF而不是动画CSS精灵？

Question

在最近的趋势中,我看到人们使用JavaScript而不是使用动画GIF动画CSS精灵？

例如:

• http://www.google.com/doodles/eadweard-j-muybridges-182nd-birthday(事实上​​,谷歌也在其他涂鸦中使用过这种技术)
• https://everyme.com/('我'徽标)
• 还有很多...

这只是为了展示或试验技术,还是有任何好处.我有兴趣了解它的好处,如果有的话.我问的原因是我无法弄清楚在两种情况下我们都需要生成中间帧(主要是使用补间技术).

Answer 1

• 控制

  您无法控制动画GIF.你无法启动它们,你无法阻止它们.它们只要加载就会生成动画.

  使用精灵,您可以控制动画.您可以启动,停止和响应浏览器事件,平移动画.例如,Google Doodles通常会在您点击它们时激活.

  9gag中可以找到一个漂亮的GIF控制系统.您可以通过将它们附加到DOM来启动它们,并通过删除它们并使用预先生成的"第一帧视图"交换它们来停止它们.但这就像GIF一样.

• 独立实例

  当您加载同一GIF的多个实例时,所有这些实例在整个页面中使用相同的图像并同时移动.如果你有一排舞蹈独角兽GIF,他们会在同一时间跳舞.同步跳舞!

  但是对于精灵,即使您使用相同的图像,动画也依赖于底层脚本.因此,如果一个精灵由一个脚本激活而另一个精灵由另一个脚本激活,则两个动画可以独立运行,并且彼此不同.

  这样您就不会创建另一个GIF,而且只需更改脚本就可以轻松修改.

• 确保流畅的动画

  动画GIF在加载时只是动画,当互联网很慢时,动画会冻结,直到更多的图像被加载.

  相比之下,精灵的优势在于您可以预先加载它们,确保预先加载所有图像.这可确保在动画之前已加载用于该动画的资源,以确保其动画尽可能平滑.

  但是,GIF仍然是图像.您可以动态地将它们从DOM中加载并在将它们附加到DOM之前侦听加载事件.

• 部分渲染

  使用PNG精灵,您可以在动画中执行"部分"操作,将动画场景分解为部分.例如,当一个角色静止不动时,手臂正在挥动.您无需为整个角色或整个场景设置动画.您可以将描绘角色身体精灵的元素置于"冻结"状态,而手臂则是动画的不同元素.这节省了精灵表的空间和大小.一个很好的例子就是Google 2012年的母亲节涂鸦.

  相比之下,大多数情况下,GIF动画中的每一帧都是整个图像,并动画显示其中的任何内容是否移动.帧越多,GIF的大小越大.

• GIF只是不扩展

  GIF用于图标.与PNG和JPG相比,GIF中文件大小与图像大小的比例不能很好地扩展.