24

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

前任：

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

4

2 回答 2

37

  • 控制

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

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

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

  • 独立实例

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

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

    这使您免于创建另一个 GIF 并且很容易修改，因为您只更改脚本。

  • 确保流畅的动画

    动画 GIF 只是在加载时进行动画处理，当互联网速度较慢时，动画会冻结，直到加载更多图像。

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

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

  • 部分渲染

    使用 PNG 精灵，您可以在动画中制作“部分”，将动画场景分解为部分。例如，当一个角色静止不动，但手臂在挥动时。您不需要为整个角色或整个场景设置动画。您可以将描绘角色身体精灵的元素置于“冻结”状态，而手臂是一个不同的动画元素。这节省了精灵表的空间和大小。谷歌 2012 年母亲节涂鸦就是一个很好的例子。

    相比之下，大多数情况下，GIF 动画中的每一帧都是整个图像，并且无论其中的任何内容是否移动都会进行动画处理。帧数越多，GIF 的大小就越大。

  • GIF 无法缩放

    GIF 用于图标。与 PNG 和 JPG 相比，文件大小与图像大小的比例在 GIF 中没有那么好。

于 2012-04-17T06:38:45.417 回答
3

除了梦想家约瑟夫的回答...

据我所知，或者至少过去是这样，GIF 文件不是真彩色，这是使用 JPG/PNG 作为 css sprite 的另一个原因。

于 2015-07-24T11:45:27.593 回答