记一次svga动画模板的踩坑历程

一、 动画模板制作步骤

1.    首先使用PS制作动画模板平面图；

2.    打开animate cc导入psd文件，导入步骤：

a)      新建舞台，选择ActionScript3.0的舞台类型；

b)     创建好舞台之后，点击菜单，文件-导入-导入到舞台，选中需要导入的psd文件，点击确定

c)     选中以下选项，点击导入

3.    转换原图层为位图：

a)     选择单个图层，鼠标右击—转换为位图，转换成功后，右边的元件库栏里会多一个位图资源，这就是刚才转换后的位图，把所有的图层都转换为位图；

b)     所有图层都转换为位图后，原来的资源文件夹就可以删除了

4.    位图转换完后，直接将.fla结尾的工程文件保存，交给动画设计师制作动画；

5.    动画制作完之后，拿到.fla的工程文件，先下载转换插件，然后把动画转换成svga文件，以下链接有具体步骤：

http://svga.io/designer.html

二、 制作动画模板注意事项：

1.     如果制作单行多文本显示的动画，需让设计师新增透明的图层块进行占位，占位图层大小需根据需要展示的文字区域大小来设。

2.     PSD设计图导入animate cc后，如果有多个占位图层，只能成功导入一个占位图层（原因未知），这时候需要在导入成功后反复复制导入成功的那个占位图层来创建别的占位图层（直接选中需要复制的图层Ctrl+C，Ctrl+V即可），注意：复制创建图层的操作必须在转换位图之前进行。

3.     官方文档https://github.com/yyued/SVGAPlayer-Web中提到的ImageKey就是位图的名称

4.     .fla结尾的工程文件转换为svga文件失败的原因及解决办法：

a)     PSD文件的图层没有完全都转换为位图；

b)     如果确认全部转换为位图，还是转换失败，则是动画帧数过多，动画过于复杂，这时需调整动画复杂度；

5.     以上为svga动画模板制作步骤和注意事项，如有发现新的问题，请联系我更新文档，让大家更好的使用。