我在最近的开发项目中发现，需要很多动画效果，目前来说有几个方案实现，
- 1.使用apng gif等动图
- 2.使用视频
- 3.使用css帧动画。
每个方案在前面都不太完美。各有存在的意义，后面我会专门对比其中的情况。而本文，重点介绍acss动画方式。
此方式之前最大的问题是在ios下闪屏问题，还有就是图片过大加载的问题。
下面我总结出来的流程：
1.将多帧图片合成为一张雪碧图（一张雪碧图是能解决闪屏问题的）
2.将png图片压缩。最好是熊猫🐼压缩之类的处理
3.生成css文件，生成将每帧图片信息，播放时间等
4.引入图片，引入css，设置class，之后小程序就有动画效果了。不过还有下面几个问题。
5.rpx单位rem导致大的雪碧图片在播放帧动画时抖动问题需要解决
6.动画播放的控制、停止事件处理等比较麻烦
至此，小程序实现帧动画太难了o(╥﹏╥)o。
接下来才是正文。我们使用的是同样的底层原理（css 帧动画）。但是工具把前面很多事情都给你做了。
首先安装一个命令行工具：win+R 打开cmd， 输入命令： npm i -g sprite2css （注意这里带了 -g 全局安装命令）
安装成功后，你可以测试是否安装成功 sprite2css -h
能够正常显示此命令的帮助信息代表安装成功。
接下来，我们cd命令行进入 放有序列帧的文件夹（png的文件）目前命令只支持png序列帧
执行sprite2css命令即可，然后等待处理完成，在文件夹会出现一个acss文件
acss文件就是我们最终生成的帧动画的所有数据，图片被打包成base64存入其中，这种方式，不需要等待图片加载时间动画秒开，会占用小程序包大小。
接下来就是在小程序项目中使用这个文件了。
1.将文件复制到小程序页面中，本文这里放到了client/pages/anim-demo 页面的目录中，同时 anim-demo.acss中引入此文件
2.项目安装组件库依赖 gm-com
3.anim-demo.json 页面配置文件中引入动画组件anim
4.最后在 anim-demo.axml 使用组件，即可看到效果。
写到最最后，
引入组件的目的是解决帧动画的抖动问题，因为小程序使用rpx rem，在背景定位上使用rpx会出现计算的像素为小数，导致位置经常被四舍五入从而抖动。这里解决办法是组件内部始终使用px定位，但进行了一次rpx转换缩放，从而达到准确定位。另一个作用是封装 开始、结束等 常用事件 和 控制属性。
