svga文件预览_开篇：SVGA的简单介绍

前言

因为工作的变故，在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就是一整套序列帧，多以动画的思路进行制作。

头像框

四. 技巧拓展

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

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

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

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

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

透视效果：车轮案例应用

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

SVGA动效设计交流群：533358660

相关资源：c#编写的鸡兔同笼程序