在本地版交友频道的直播礼物中，我们使用了SVGA动画，官方和网上能查到的资料也不是很多，所以在使用SVGA的时候走了不少弯路踩了不少坑，所以今天对在实用SVGA的时候碰到过的问题进行一个汇总，希望可以让广大设计师朋友们在使用SVGA的时候能够避开这些问题，可以少掉些头发。
01、SVGA动画介绍
SVGA是YY开发的一种跨平台的开源动画格式，同时兼容iOS / Android / Web。SVGA可以理解为就是一种2d动画的储存格式，SVGA动画其实就是把 Flash 或者AE 文件中的所有动画元素（位图、矢量）给提取出来，并将其在时间轴中的每帧的动画元素（位移、缩放、 旋转、透明度）导出，然后通过Player将这些信息还原。
SVGA在动画播放前，会一次性地上传所有图片信息到GPU，在播放的过程中，这些图片信息会被重复使用。CPU与GPU 交换的次数大大减少，图片信息数目也在可控范围。内存、CPU、GPU 占用能达到最优状态，一个10几MB大的序列帧效果，用svga格式可以只要几百K甚至几十KSVGA 动画的性能可以得到极大的保障。SVGA官方也给出几点SVGA动画的优势：
（图片来自SVGA官网）
02、SVGA动画常见问题
避坑一：文件导入常见问题
1.导入序列帧
由于我们是在城堡礼物效果中首次使用SVGA动画，这是一个3D动画，包含了城堡的旋转和烟花粒子等效果，所以避免不了图片序列帧的实用，在刚开始使用的时候由于我选择了直接导入png序列，导致最终输出SVGA动画的时候，图片元素直接丢失，出现了黑屏现象。
（不要直接选择png序列）
2.序列帧自动排序
在制作序列帧动画的时候，我们的动画通常每张图片只播放1帧，但是不能直接导入 png 序列，这样我们导入的文件需要手动裁剪，然后再进行排序，所以我们需要利用ae的自动排序功能来快速帮我们完成序列帧排序
避坑二：制作与导出碰到的问题
我们通常会有30帧每秒来制作特效，如果想导出一个完整的序列帧，一秒就会有30 张 图片资源。礼物动画通常会用多种特效进行组合叠加，如果每个特效都是30张图片的话，我们的资源包将会非常地庞大，适当地优化资源来减小包体的大小就非常有必要了，对图片资源进行压缩、选择一个合适的画布尺寸、使用更低的帧速率都是很好用的办法。
1.抽帧（保持帧速率统一）
礼物的城堡动画是一个旋转的3D动画，完整的动画导出有40张图片，通过tinypng压缩到了极限依旧占了3.8mb的内存，所以不得不对这个动画进行抽帧处理，我分别对隔1帧删1帧、每2帧删1帧，和每3帧删2帧进行了测试，最后选择了效果最好的隔1帧删1帧的方法。砍了一半的帧，这个时候我们就需要将帧速率进行匹配，所以原来30帧每秒的帧速率需要调整为15帧每秒，来保证效果时长前后保持一致。
抽帧前
抽帧后
2.压缩素材
虽然抽帧之后文件小了一半，但是文件依旧高达1.3mb，这和我们所看到的官方几百k的文件差距还是很大的，通过压缩素材可以减小内存大小，经过尝试，即使把图片压缩到原尺寸的一般，在动态展示的时候，受到的影响并不是太大，而且一套压缩50%的尺寸的序列帧图片，甚至可以减少60%的大小。
（图片来自SVGA官网）
3.利用元素组合实现复杂的动画
烟花也是礼物中常用的元素，一套完成的烟花效果需要的序列帧较多，常见的烟花效果一 般也是对称图形，我们可以截取四分之一进行拼接，这样做可以极大地缩小烟花占用的内存，我们这次做的烟花效果是心形烟花，所以我截取了一半进行拼接。
如果我们给烟花叠加上不同的光晕，可以得到不同颜色的烟花，这样可以让我们的效果更加丰富而不会增加额外的内存。
4.合成大小
最开始我使用的是750*1334的尺寸去做动画，一个专门做礼物的好友给我的建议是 680*1209，在经过测试后发现，这个尺寸输出的文件会更小，同时可以完美适配主流的 机型。
5.官方规范帧速率
在最开始使用SVGA的时候我用过25帧每秒进行制作，但是在输出之后文件变成了20帧每秒，帧速率变了之后动画变得特别的卡，我一直以为是我的设置出了问题，在经过多方询问后，得到了官方解答，SVGA转换器会在输出时强制设置为60 的约数，如6, 10, 12, 15,20, 30, 60等，SVGA礼物模块如果帧率太高、相应文件也会稍微更大一些。我一般建议15、30、10，礼物常用15，高频位移的可以使用30帧每秒，使用官方建议的帧速率可以降低出现动画不同步卡顿等现象。
6.合成路径不宜过深
在最开始的制作中，我把城堡、烟花、烟雾分别放在了不同的预合成中，在最终导出文件的时候出现了文件丢失的问题，经过多次测试发现，预合成层级超过2层就会出现黑屏的问题，在审查代码后发现，层级过深的文件会直接丢失了，所以在制作时，可以利用父级关系来控制序列帧素材。
避坑三：SVGA支持效果
支持位图动画和形状图层绘制，但复杂的、不建议。
不支持AE自带及外部插件的效果控件特效，无法输出。
不支持3D图层，不支持运动模糊，不要使用时间重映射。
无法使用叠加模式，不支持图层轨道遮罩。
可以使用钢笔工具的遮罩，但仅支持加法。
能使用的基本的Transform信息制作关键帧动画（位移旋转缩放）。
可以使用父子关系，可以使用有实际数值帧变化的表达式。
可以使用合成组，但请不要层数过高及重复K帧，会导致输出丢失。
尽量减少无用空白像素，可节省内存。
关注公众号后台回复「SVGA」可获取SVGA安装包和支持效果表。
03、结语
直播平台礼物动画工具其实有很多，有些团队甚至是自己开发了一套工具，称之为核心科技，经过各方打探依旧无法窥得真容，但是我相信随着技术的发展，将会有更多更好的开源工具供大家使用。
