前言

因为工作的变故，在18年底开始使用svga，捡起AE做一做动效。相关资料能查到的不多，趟了些坑。

没有找到组织，官方群也进不去，于是自己建了个小群，并开始陆陆续续整理分享些经验干货给大家。

在职期间著作权归属公司，请勿私自转载(谢谢配合)。

相关预览gif和分享仅供交流，请勿商用(文明阅读怕惹事)。

文章最初发布在新浪博客，近期会整理排版发到站酷，接下来正文开始：

一. 什么是SVGA

SVG，它的英文全称为Scalable Vector Graphics，即可伸缩矢量图形。

SVGA，理解为就是一种2d位图动画的储存格式，可以很小的容量播放一个带通道的效果，很好的替代png序列(文件容量大\自带加密)、gif文件格式(透明通道\色域低\边缘锯齿明显)。

虽然支持动态绘制矢量图形，但也蛮占性能，目前更多使用提前做好的位图(Png素材)导入AE制作动画。

带来的直观好处：一个10几MB大的序列帧效果，用svga格式可以只要几百K甚至几十K。

设计师所制作的效果，就是用户在版本中的完整效果，保证效果也让内存不会爆掉。

官方网址：http://svga.io/index.html

再引用一段开发团队的故事背景：

YY开发团队当时针对《某直播》动画开发的格式文件，可以更小容量的将表情动画实现到直播等应用类软件中。

遇到的主要问题是资源文件大小和实时内存占用及CPU消耗。市面上有较多压缩方法及文件格式(Gif、WebP、A-PNG等)，但都无法保障满足性能的同时还原出美术设计出的原效果。

开发团队参照CreateJS和BodyMovin工具开发了开发 SVGA。

据悉在 YY 系的产品中有超过十多个产品的使用，应用范围涵盖 iOS / Android / Web / PC 客户端等。

通过烘焙关键帧记录每一帧的参数，动画过程中图片都在不断复用，性能得到提升。并且不用解析高阶插值(二次线性方程，贝塞尔曲线方程)这个格式不关心你的关键帧及曲线算法，因为导出时，每一帧都是关键帧。

二. 案例效果

目前公司的直播平台和资讯类App普遍使用SVGA格式制作动画和特效。

放少量效果给大家，gif压缩和文件大小有限制，大家看个小样，有兴趣的可以下载鱼丸空间。

大多数效果几十K-几百K内就可以完成，不建议一个svga就是一整套序列帧，多以动画的思路进行制作。

10K

29K

头像框

13K+18K

几毛钱的礼物

113k

79k

几块钱的

103K

132K

几十的

123K

442K

几百的

237K

428K

可能价值上千

三. 限制与规范

虽然制作软件是AE2017(及以上)，大家都会用，但是限制还是客观存在的。↓

支持位图动画和形状图层绘制，但复杂的、不建议。

不支持AE自带及外部插件的效果控件特效，无法输出。

不支持3D图层，不支持运动模糊，不要使用时间重映射。

无法使用叠加模式，不支持图层轨道遮罩

可以使用钢笔工具的遮罩，但仅支持加法。

能使用的基本的Transform信息制作关键帧动画(位移旋转缩放)

可以使用父子关系，可以使用有实际数值帧变化的表达式。

可以使用合成组，但请不要层数过高及重复K帧，会导致输出丢失。

尽量减少无用空白像素，可节省内存。

更多限制与规范可以参照下方的官方指导截图。若有新发现，欢迎你的分享。

四. 技巧拓展

考虑分享一些案例技巧，例如：

灯笼：简单光晕与柔软飘带

金币：叠加质感与加法遮罩

粒子效果：粒子原理及多种实现

烟花：序列图的使用与资源节省

透视效果：车轮案例应用

文章在逐步整理，尽量让可读性高一些。有什么想了解的欢迎留言。

SVGA动效设计交流群：533358660