动效落地系列教程(九):SVGA动效实现方案

语言: CN / TW / HK

SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。动画文件体积更小,播放资源占用更优,动画还原效果更好。最大的优势在于对于复杂效果可以支持序列帧导出。

SVGA 与 Lottie 最本质的区别在于代码对动画过程记录的方式, Lottie 基本上是按照我们在 AE 当中的关键帧及缓动的结合形式去记录动画。而 SVGA 则是通过记录我们每一个图层每一个时间上的动画状态,从而省去对缓动值的计算。跟序列帧的逻辑非常相似,但是因为他的素材可以复用,所以会比序列帧占用更低的内存。

SVGA能够支持的特效有:

● 位移

● 缩放

● 旋转

● 透明度变化

● 蒙版

SVGA不支持的特效有:

● 粒子效果

● 羽化

● 遮罩

● 颜色替换

● 3D图层效果

● 操控点工具

● 表达式

● 流体效果

● 高斯模糊

● 描边

● 位移曲率

...

但是,针对复杂特效,SVGA可以采用序列帧的方式导出,后面会详细介绍。

插件的下载与安装

下载地址:SVGA官网--官网首页--社区生态--设计师工具

http://svga.io/index.html

有win和mac版本,有详细的安装步骤,按照步骤操作即可

SVGA文件的导出与预览

1、插件安装成功后,我们在AE的窗口--扩展下,即可找到该插件

2、选择我们制作好的动效文件,点击插件进行导出,先选择输出路径,再点击开始转换(注意:矢量动效可直接导出,复杂动效会采用后面第二种序列帧的方法)

3、导出之后,找到我们输出文件位置,可以看到直接输出一个.svga格式的文件

4、将文件拖入官网播放器进行预览

确认效果没有问题后,我们可以交付给开发

接下来讲解第二种方式,带粒子特效的复杂动效如何导出

1、从AE中导出序列帧,具体方法我们之前介绍过,这里不再赘述,如下

2、将序列帧导入到AE中,从菜单--文件--导入,选择存放序列帧的文件夹,选择导入文件

3、对序列帧进行裁剪(关键),因为拖入序列帧是占据整个时间轴的,我们全选,alt+】进行裁剪

4、将序列帧进行错位,选择菜单栏,动画--关键帧辅助--序列图层,这里默认,直接点击确定

序列帧错开如图所示:

5、利用SVGA插件导出,导出如下

放入播放器预览效果如下:

采用序列帧方式导出所占有的内存会比直接导出大很多,设计师在落地过程中和开发密切沟通,寻找最合适的落地方案。

Powered by Froala Editor