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文件拖拽到你的项目中就可以直接加载使用了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,312评论 4 61
  • 最近几个月的生活比较单调,是机械式的重复,但自己还是乐在其中。回想起来自己已经很久没有观看电视剧了,相比前几年的电...
    天水讼阅读 1,914评论 0 3
  • com
    陈炜林阅读 85评论 0 0
  • 我的温馨小屋,我的港湾,我的爱。 我的温馨小屋,它不奢华,也不敞亮,可是它有序,有颜,有内涵。 走进我的小屋,安静...
    宁静随想阅读 599评论 1 10
  • 按农历来算,藤藤还有十天就满2周岁了。总是想把她成长的每个瞬间都记录下来,换了几个日记本,在微信公众号写过,在Zi...
    敏姐的思维空间阅读 495评论 2 3