SVGAPlayer学习总结

目前直播间使用动画实现，调研发现YY一个开源的项目。

项目地址:https://github.com/yyued/SVGAPlayer-iOS

具体库介绍我这边就不多阐述了。

这个SDK，API使用上是比较简单的，但是由于要生成SVGA文件，所以需要告诉设计师实现方式。我这边就下载了AE做了下基础的调研。

我这边下载的Adobe After Effects CC 2018版本，直接从官网下载的。

然后下载ZXP Installer，安装AE插件的工具。SVGAPlayer的AE插件Converter for After Effects。下载地址:http://svga.io/designer.html

安装完AE之后，使用ZXP Installer去安装Converter for After Effects插件。完毕之后，打开AE，这时候在这里就能看到安装的插件了。

AE插件位置

OK，我们先不用管这个插件，后面在做介绍。

先制作一个简单的动画。

首先，导入图片资源，同时创建一个合成。当然也可以自己创建图形。这里为了方便就直接导入一个图片。

导入一个图片资源

我这边导入了一个皇冠的图片，调整显示百分百就是下图这个效果。

图片素材

现在开始制作一个简单的缩放动画。

动画帧制作

简单描述下，红色选中框部分主要要点亮时间图标，这样才能移动时间轴时候让数据生效，之后通过拖动上图右边的时间轴，在每个时间点上去修改红色选中框中的位置和缩放数据，会在时间轴下生成一个个动画数据节点，见上图时间轴上的浅灰色菱形点，这样操作之后运行起来就是一个简单的缩放的动画了，点击回车就可以预览。

然后点开之前安装的那个AE插件，设置下输出路径和播放文件就是你当前保存的AE文件，然后点击转换就可以生成SVGA文件了，默认2.0版本就好。

AE-SVGA插件面板

之后把生成的SVGA文件拖拽到你的项目中就可以直接加载使用了。