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

时间:2024-04-16 15:09:39

一、场景与动画      

      为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画。这种动画不是(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有点过了,除非已经复杂到游戏级别,那么是时候了。