盘点在H5小游戏里常用的动效制作套路

近年来，越来越多的自带绚丽动效的H5小游戏如雨后春笋一般冒出来，而也正是这些炫酷的交互动效，才能够成功地吸引住用户的眼球，让用户为此驻足。

而「动效制作」也伴随着H5的大热而火遍前端圈及设计界，下面就让型科为大家分享在H5小游戏里常用的动效制作套路。

首先给大家贴上几个动效例子，上面这些动效都是采用我们非常熟悉的gif动画制作出来的动效，而H5动效制作的第一套路，就是GIF了。

动效制作手法1：GIF

GIF图片擅长于制作细节的小动画，位图，优势在于 “体型”很小，可压缩，制作成本低，以图片的形态适用于各种操作系统，无兼容性的后顾之忧。制作GIF动画的方式有很多，例如我们所熟悉的Photoshop时间轴，或是利用Flash，AE将动画导出存成GIF格式等等。

GIF动画最常在H5动效里当担loading导航条，热门小标签等元素，要把控图片大小和精度之间的平衡，所以它一般用于制作小细节的动画。

H5页面承载GIF图片的方式相对以下要介绍的其他方法，是最省成本，最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。

说完gif，接下来来说下他的兄弟：逐帧动画

动效制作手法2：逐帧动画

逐帧动画即是利用一张等间距的动画分解逐帧图片，由js脚本模拟编写或是使用css3新属性step()制作而成。step()在移动端的兼容性是很好的，但使用比较小众。逐帧动画和GIF动画的差别在于，脚本可以控制逐帧动画的快慢和动作的暂停，而GIF动画无法在后期通过代码进行动画速率及透明度的修改。