javascript - 为什么不用动画 GIF 而是动画 CSS Sprite ？

Question

在最近的趋势中，我看到人们使用 JavaScript 而不是使用动画 GIF 来制作 CSS Sprite 动画？

例如:

• http://www.google.com/doodles/eadweard-j-muybridges-182nd-birthday (事实上​​，Google 在其他涂鸦中也使用了这种技术)
• https://everyme.com/ (“我”标志)
• 还有更多...

这一切只是为了展示或试验技术吗？或者它有什么好处吗？我有兴趣了解其好处(如果有的话)。 我问的原因是我无法弄清楚，因为在这两种情况下我们都需要生成中间帧(主要使用补间技术)。

Answer 1

• 控制

  您无法控制 GIF 动画。你无法启动它们，也无法阻止它们。它们只是在加载后立即动画。

  使用 Sprite ，您可以控制动画。您可以启动、停止并对浏览器事件使用react，平移动画。例如，Google 涂鸦通常会在您点击时激活。

  9gag 中有一个漂亮的 GIF 控制系统。您可以通过将它们附加到 DOM 来启动它们，并通过删除它们并用预先生成的“第一帧 View ”交换它们来停止它们。但这就是 GIF 的全部用途。

• 独立实例

  当您加载同一 GIF 的多个实例时，所有这些实例在页面上使用相同的图像并同时移动。如果你有一排跳舞的独 Angular 兽 GIF，它们会同时跳舞。同步舞蹈!

  但是对于 Sprite 来说，即使您使用相同的图像，动画也依赖于底层脚本。因此，如果一个 Sprite 由一个脚本设置动画，而另一个 Sprite 由另一脚本设置动画，则两种动画都可以独立运行，并且彼此不同。

  这样您就不用再创建另一个 GIF，而且很容易修改，因为您只需更改脚本。

• 确保动画流畅

  动画 GIF 只是在加载时动画，当互联网速度较慢时，动画会卡住，直到加载更多图像。

  相比之下， Sprite 的优点是你可以预先加载它们，确保所有图像都预先加载。这可以确保用于该动画的资源在动画之前已加载，以确保动画尽可能流畅。

  但是，GIF 是静止图像。您可以从 DOM 动态加载它们并监听加载事件，然后再将它们附加到 DOM。

• 部分渲染

  使用 PNG Sprite ，您可以在动画中进行“局部处理”，将动画场景分解为多个部分。例如，当一个 Angular 色站着不动，但 ARM 在挥动时。您不需要为整个 Angular 色或整个场景设置动画。您可以将描绘 Angular 色 body Sprite 的元素置于“卡住”状态，而 ARM 则是另一个具有动画效果的元素。这节省了 Sprite 表的空间和大小。 Google 的 2012 年母亲节涂鸦就是一个很好的例子。

  相比之下，大多数时候，GIF 动画中的每一帧都是整个图像，并且无论其中的任何内容是否移动，都会产生动画效果。帧数越多，GIF 的尺寸就越大。

• GIF 无法缩放

  GIF 是用于图标的。与 PNG 和 JPG 相比，GIF 中文件大小与图像大小的比例放大得不太好。