设计沉思录｜SVGA常见问题避坑指南

原创环铁艺术家 58UXD

前言

在本地版交友频道的直播礼物中，我们使用了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帧每秒，使用官方建议的帧速率可以降低出现动画不同步卡顿等现象。