目前直播间使用动画实现,调研发现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,这时候在这里就能看到安装的插件了。
![](https://img.haomeiwen.com/i7161204/bc94dc8bf6060c8d.png)
OK,我们先不用管这个插件,后面在做介绍。
先制作一个简单的动画。
首先,导入图片资源,同时创建一个合成。当然也可以自己创建图形。这里为了方便就直接导入一个图片。
![](https://img.haomeiwen.com/i7161204/df6f5f37056e5626.png)
我这边导入了一个皇冠的图片,调整显示百分百就是下图这个效果。
![](https://img.haomeiwen.com/i7161204/febad63964e28096.png)
现在开始制作一个简单的缩放动画。
![](https://img.haomeiwen.com/i7161204/1a03ccd2ce4be56c.png)
简单描述下,红色选中框部分主要要点亮时间图标,这样才能移动时间轴时候让数据生效,之后通过拖动上图右边的时间轴,在每个时间点上去修改红色选中框中的位置和缩放数据,会在时间轴下生成一个个动画数据节点,见上图时间轴上的浅灰色菱形点,这样操作之后运行起来就是一个简单的缩放的动画了,点击回车就可以预览。
然后点开之前安装的那个AE插件,设置下输出路径和播放文件就是你当前保存的AE文件,然后点击转换就可以生成SVGA文件了,默认2.0版本就好。
![](https://img.haomeiwen.com/i7161204/76530334c1018a8e.png)
之后把生成的SVGA文件拖拽到你的项目中就可以直接加载使用了。
网友评论