如何制作网页小动画？——gif or png

一、场景与动画

为了拉动网站氛围，或者吸引用户浏览焦点，需要使用一些小动画。这种动画不是（gif）单纯的重复，而是需要需要一些控制和交互，比如在动画完成后打开一个对话框。动画有几个基本要素（时间控制，状态切换，事件触发）。

下面举一个天猫的场景：

一只蝴蝶的出现引起了小猫的注意，小猫慢慢的跟随蝴蝶靠近屏幕边缘，最后被莫名其妙的拉到了可视区域的外部，最后弹出天猫工具栏。

我们经常使用gif来制作动画。也确实可以用几个gif拼接来完成一个场景动画。中间的衔接使用js来控制，把上面的三个gif衔接起来就可以创建出一个场景动画。但是后来发现gif并不是最好的方案，下面来分析一下：

二、Gif方案分析

   1、图片预加载？

这会提高性能？但是，预加载gif可是不行的，gif一旦被加载，会立刻被执行，即使处于隐藏状态，当进行状态切换时，动画衔接就会出现不匹配，你不知道它正处于何种状态。

   2、JS控制？

很遗憾，gif无法通过JS来控制，一旦开动，你就只能等待，唯一的控制发式，就是，估计动画时间，并尽可能的延长下一次循环，这样才能进行平稳的状态切换。

   3、透明？

当小猫穿过logo时，需要图片透明。很高兴，gif确实可以实现透明，但是，很遗憾，他是存在毛边的，为了使它看起来舒服一点，聪明的设计师将它的边围了一圈背景色。

三、换一种方式

既然它存在这么多的问题，不如换一种方式？偶然，在一篇博文上看到了google的一种做法，使用png来实现，采用css sprite技术将动画帧合并在一张背景图片上，通过改变图片的位置来切换图像。这个就指哪打哪了。当然png实际上不支持动画（虽然号称支持），但是它支持透明，拥有更丰富的色彩。动画的本质就是多帧图片（包括绘制出来的图像）在时间轴上的切换。这种方式游戏开发中很通用。

这样我们就可以解决掉前面提到的几个问题了。

四、总结

制作小动画如果不要求交互，可以使用gif。如果需要交互且要求高品质的图像质量应使用png。使用canvas有点过了，除非已经复杂到游戏级别，那么是时候了。