svga插件

前阵子看到一些使用canvas或者jQuery插件库完成的动画，例如：

也可以实现非常棒的效果，还具备一些小的互动。但大多时候，出于工作配合以及对效果的把控，动效/特效还是需要由设计师

自己来完成。而出现在app中的礼物特效最常用的就是使用SVGA格式进行输出。

首先说一下SVGA和JSON文件的区别，作为两者的导出工具，Bodymovin和SVGAConverter是AE对接app过程中最常用的两个插件：

Bodymovin：用于导出JSON文件，如果由矢量作图，且动画效果局限于缩放、位移、旋转以及路径的相关变化这些基础的操作，那JSON完全可以胜任。优点是，占用存储非常小，可以适配不同分辨率且不失真(使用形状图层的前提下)。但是缺点也很明显，无法导出复杂的动画效果，例如AE自带的“Effects & Presets”和常用到的saber、particular、Optical Flares等容易出效果的插件。

SVGAConverter：顾名思义，就是SVGA转换插件。先说一个缺点：AE自带的复杂效果也是无法直接导出的，甚至JSON文件能应用的图层渐变，放在SVGA里也是不适用的，如下图

优点：就是对上述缺点有相应的解决办法。第一，渐变无法导出，可以直接使用图片，导出时会封装在SVGA文件内，相比JSON使用位图素材时会附带产生“img”文件会方便很多；第二，更加复杂的效果(如粒子，光效等)，可以通过导出png序列帧再使用插件进行二次导出即可。这个优点也就决定了在做