详解 AE 如何将 png 序列帧导出为 SVGA 动画文件【AE教程】

1.导入 png 序列帧至AE

从菜单栏 “导入” -> “文件” ,选择存放序列帧的文件夹

详解 AE 如何将 png 序列帧导出为 SVGA 动画文件【AE教程】

 然后导入,接着看到如下界面,直接确定。

详解 AE 如何将 png 序列帧导出为 SVGA 动画文件【AE教程】

此时,窗口中就显示了我们所导入的所有序列帧,如下所示

详解 AE 如何将 png 序列帧导出为 SVGA 动画文件【AE教程】

 

2. 对序列帧进行裁剪【关键

我们刚导入的序列帧默认是占据了整个时间线的

详解 AE 如何将 png 序列帧导出为 SVGA 动画文件【AE教程】

所以我们需要手动对它进行截取,windows 上的快捷键是 alt + [ alt + ] 来分别进行前后的裁剪。

裁剪的结果如下所示,这里我们只保留一帧的时间。

详解 AE 如何将 png 序列帧导出为 SVGA 动画文件【AE教程】

 

3.将序列帧进行错位

这一步,我们需要回到菜单栏,“动画”-> “关键帧辅助” -> “序列图层”

详解 AE 如何将 png 序列帧导出为 SVGA 动画文件【AE教程】

这里直接默认,并适当调整工作区时间即可,结果如下所示。

详解 AE 如何将 png 序列帧导出为 SVGA 动画文件【AE教程】

 

4.利用插件导出 SVGA 动画文件

菜单栏中 “窗口”-> “扩展” -> SVGAConverter_AE ( 详见 下载安装教程 )打开该插件

详解 AE 如何将 png 序列帧导出为 SVGA 动画文件【AE教程】

然后再点击 “输出路径” 按钮,选择我们要输出的 svga 的目录和名字,最后就可以点击 “开始转换 - 2.0” 了(需要等待若干时间,期间可能会出现闪烁)

5.预览结果 

我们可以通过点击 “播放文件” 按钮,选择我们刚刚导出的 svga 动画,效果如下【20帧 132*130 分辨率的图像,解吗到内存中,占用还是高达 1.3 MB,可见如果分辨率更大,帧数更多的话,在移动端还是鸭梨不小

详解 AE 如何将 png 序列帧导出为 SVGA 动画文件【AE教程】

 

也可以直接拖动到这个网站进行预览 —— http://svga.io/svga-preview.html 

详解 AE 如何将 png 序列帧导出为 SVGA 动画文件【AE教程】

官网还提供了其他功能(比如 protobuf 描述的素材信息),感兴趣的读者可以自行探索。

 

参考链接:

https://www.bilibili.com/video/BV1Ut411r7Gj?p=3

http://svga.io/designer.html