svga插件_如何利用AE导出SVGA（svga）JSON（json）动画的工作分享

大家好，我是珍珍，请多多指教。

在UI动效中广泛用到svga动画，svga动画主要针对的是位图(就是图片)和简单的矢量图形，通过记录每张素材的位移缩放等数据来实现动画

它的优点是

1、省去开发的时间成本

2、对交互动画本身的还原度极高

3、导出的包比较小

4、可以实现简单的矢量图形动画线条动画

首先我们要给AE装上svga这个插件下载地址(win|Mac版本)

http://svga.io/designer.html

选择 菜单 > 文件 > 打开，选中下载好的安装包，根据引导完成安装

重新启动AE在窗口 > 扩展 > SVGAConverter–AE

制作svga动画前期准备

1、在ps或者别的绘图软件里完成画面的绘制和拆分

a：命名不能用中文可用拼音或者英文

2、把ps里面的图片导出成png在一个文件夹里

3、打开AE把刚刚导出的png文件夹放到项目栏里

制作svga动画的几点小技巧

1、AE内置插件不可用但脚本motion2)可以用 例如：粒子插件、(但是如果想要用粒子效果也不是不行可以通过导出png序列帧的形式去实现粒子效果还可以进行删帧实现素材量的大小例如：可以删除13579，，，然后从新放入动画的时间轴中)

2、添加蒙板问题，svga动画可以是用蒙版但是不使用轨道遮罩，(每张图片可以使用一个默认蒙板，蒙板里面的相减之类的不能用)蒙板可以做蒙板的简单的路劲动画

复杂的路径动画导出之后可能会发生丢帧的问题

3、有些相同的素材图片可以进行复用来节省空间哦

(ps推荐一款图片压缩神器，大概能压缩百分之70%，-小鸭驴图片压缩)

4、有些功能能不能用大家要记住看这个功能是不是能用数值进行计算例如能计算的有位移，旋转，缩放之类的不能计算的有轨道遮罩、颜色叠加等等

ae制作的svga动画如何导出

制作完的动画先进行保存按照下面的路径

在窗口 > 扩展 > SVGAConverter–AE打开脚本的操作窗口首先选择输出路径，选择2.0开始转换，到处完毕之后在操作窗口会显示动画的效果来一个初步的预览，

关闭AE之后也可以在网页中进行浏览效果，下面是网址

http://svga.io/svga-preview.html

拖入这个网址就可以查看动画了！

以上就是对svga动画的一个简单的总结，有总结不到的地方或者有疑问的地方欢迎大家在评论区提问和纠正哦！

图片压缩神器-小鸭驴图片压缩

相关文章:SVGA蒙版问题 大家好，我是珍珍大哥，请多多指教！ 这次 …...

spine动画如何创建IK spine动画创建IK是spine里比较 …...

ps如何导出到spine的方法教程 ps如何导出到spine的方法教程 大家 …...