为什么不GIF动画，而不是CSS动画精灵？ [英] Why not animated GIF instead of animated CSS sprites?
问题描述
在最近的趋势我见过人们使用动画而不是使用GIF动画的JavaScript 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 （事实上，谷歌使用其他涂鸦这种技术太）
- 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.
使用精灵，你可以控制动画。您可以启动，停止和响应浏览器事件，通过动画平移。例如，谷歌涂鸦，当你点击它们通常激活。
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启动它们，并删除它们，并以pre产生的第一画面浏览交换他们阻止他们。但是，这是尽可能的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.
在此相反，精灵的优点是你可以pre-加载它们，确保所有图像加载事前。这可以确保用于该动画的资源都已经加载动画之前，以确保它动画尽可能平滑。
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和监听load事件您附加他们到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精灵，你可以在做动画的谐音，打破了一个动画场景的部分。例如，当一个字符静止，但臂挥舞。你并不需要动画整个字符，或者整个场景。您可以将描绘处于冻结状态，角色身体的精灵，而武器是被动画不同元素的元素。这节约了精灵表空间和大小。对于一个很好的例子是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屋！
