SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。动画文件体积更小，播放资源占用更优，动画还原效果更好。最大的优势在于对于复杂效果可以支持序列帧导出。

SVGA 与 Lottie 最本质的区别在于代码对动画过程记录的方式， Lottie 基本上是按照我们在 AE 当中的关键帧及缓动的结合形式去记录动画。而 SVGA 则是通过记录我们每一个图层每一个时间上的动画状态，从而省去对缓动值的计算。跟序列帧的逻辑非常相似，但是因为他的素材可以复用，所以会比序列帧占用更低的内存。

SVGA能够支持的特效有：
● 位移
● 缩放
● 旋转
● 透明度变化
● 蒙版

SVGA不支持的特效有：
● 粒子效果
● 羽化
● 遮罩
● 颜色替换
● 3D图层效果
● 操控点工具

● 表达式
● 流体效果
● 高斯模糊
● 描边
● 位移曲率

... 

但是，针对复杂特效，SVGA可以采用序列帧的方式导出，后面会详细介绍。

插件的下载与安装

下载地址：SVGA官网--官网首页--社区生态--设计师工具

http://svga.io/index.html

有win和mac版本，有详细的安装步骤，按照步骤操作即可

SVGA文件的导出与预览

1、插件安装成功后，我们在AE的窗口--扩展下，即可找到该插件

2、选择我们制作好的动效文件，点击插件进行导出，先选择输出路径，再点击开始转换（注意：矢量动效可直接导出，复杂动效会采用后面第二种序列帧的方法）

3、导出之后，找到我们输出文件位置，可以看到直接输出一个.svga格式的文件

4、将文件拖入官网播放器进行预览

确认效果没有问题后，我们可以交付给开发

接下来讲解第二种方式，带粒子特效的复杂动效如何导出

1、从AE中导出序列帧，具体方法我们之前介绍过，这里不再赘述，如下

2、将序列帧导入到AE中，从菜单--文件--导入，选择存放序列帧的文件夹，选择导入文件

3、对序列帧进行裁剪（关键），因为拖入序列帧是占据整个时间轴的，我们全选，alt+】进行裁剪

4、将序列帧进行错位，选择菜单栏，动画--关键帧辅助--序列图层，这里默认，直接点击确定

序列帧错开如图所示：

5、利用SVGA插件导出，导出如下

放入播放器预览效果如下：

采用序列帧方式导出所占有的内存会比直接导出大很多，设计师在落地过程中和开发密切沟通，寻找最合适的落地方案。

Powered by Froala Editor