为什么不使用动画 GIF 而不是动画 CSS 精灵? [英] Why not animated GIF instead of animated CSS sprites?

问题描述

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

In recent trends I've seen people animating CSS sprites using JavaScript instead of using animated GIFs?

例如:

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

• http://www.google.com/doodles/eadweard-j-muybridges-182nd-birthday (in fact, Google used this technique in other Doodles too)
• https://everyme.com/ ('me' logo)
• and many more...

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

Is that all just to show or experiment with technology or are there any benefits out of it. I m interested in knowing the benefits, if there. The reason I m asking is that I couldn't figure out as in both cases we need to generate the intermediate frames (mostly using tweening technique).

推荐答案

• 控制

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

  You have no control over animated GIFs. You can't start them, you can't stop them. They just animate as soon as they load.

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

  With sprites, you can control the animation. You can start, stop and react to browser events, pan through the animation. For example, Google Doodles usually activate when you click on them.

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

  A nifty GIF control system can be found in the 9gag. You can start them by appending them to the DOM, and stop them by removing them and swapping them with a pre-generated "first-frame view". But that's as far as GIFs go.

  独立实例

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

  When you load multiple instances of the same GIF, all these instances use the same image across the page and move at the same time. If you have a row of dancing unicorns GIFs, they'd be dancing at the same time. Synchronized dancing!

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

  But with sprites, even if you are using the same images, the animation relies on the underlying script. So if one sprite is animated by one script and another by another script, both animations can run independently, and differently from one another.

  这使您无需再创建另一个 GIF，而且修改起来很容易，因为您只需更改脚本.

  This saves you from creating another GIF and it's easy to modify since you are only changing the script.

  确保流畅的动画

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

  Animated GIFs just animate while loading, and when the internet is slow, the animations freeze up until more of the image gets loaded.

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

  In contrast, the advantage of sprites is you can pre-load them, ensure all images load beforehand. This makes sure that the resources used for that animation are already loaded prior to animation to make sure it animates as smooth as possible.

  然而，GIF 是静止图像.您可以从 DOM 动态加载它们并在将它们附加到 DOM 之前侦听加载事件.

  However, GIFs are still images. You can dynamically load them off the DOM and listen for a load event before you append them to the DOM.

  部分渲染

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

  With PNG sprites, you can do "partials" in the animation, breaking an animation scene to parts. For example, when a character stands still, but the arms are waving. You don't need to animate the entire character, or the entire scene. You can place an element depicting the sprite of the character's body in a "freeze" state while the arms are a different element that is animating. This conserves space and size of the sprite sheet. A good example for this was the 2012 Mother's Day Doodle by Google.

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

  In contrast, most of the time, every frame in a GIF animation is whole image, and animates whether or not anything in it moves. The more frames, the bigger the size of the GIF.

  GIF 无法缩放

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

  GIFs were meant for icons. The ratio of file size to image size don't scale up that well in GIFs as compared with PNG and JPG.

  这篇关于为什么不使用动画 GIF 而不是动画 CSS 精灵?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！