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的方法教程大家 …...

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

svga插件_【SVGA扩展】在AE或Animate中导出SVGA文件的设计师工具（mac+win）及安装教程...
SVGA扩展 – 在AE或Animate中导出SVGA文件的设计师工具什么是SVGA SVGA 是一种全新的古文字体歌曲音乐swf转换,华为ipad华为ipad手机手机省电模式古风字体播放体验,SV ...
svga插件_如何压缩SVGA格式的礼物特效文件
前阵子看到一些使用canvas或者jQuery插件库完成的动画,例如: 也可以实现非常棒的效果,还具备一些小的互动.但大多时候,出于工作配合以及对效果的把控,动效/特效还是需要由设计师自己来完成.而 ...
excel python插件_如何利用Excel与Python制作PPT
对外汉语课堂中需要制作PPT.有些PPT的版式是相对固定的,如果数量巨大的话,可以利用python的pptx插件,与excel相结合,制作PPT.完整工作流有些复杂,所以分为4个部分来说明. PPT准 ...
html5教程鼠标,利用HTML5 Canvas制作键盘及鼠标动画的实例分享
键盘控制小球移动众所周知,我们所看到的动画实际上就是一系列静态画面快速切换,从而让肉眼因视觉残像产生了「画面在活动」的视觉效果.明白了这一点后,在canvas上绘制动画效果就显得比较简单了.我们只需 ...
svga插件_SVGA实例讲解
从发了一篇<使用SVGA优化礼物动画>之后, 很多小伙伴一直在问我相关实现的问题.以及碰到了一些问题怎么解决? 趁现在时间上比较富裕的时候写一篇关于SVGA的实例使用SVGA实现上图效果 ...
svga插件_SVGA实例讲解|UI|教程|xinjiebi - 原创文章 - 站酷 (ZCOOL)
至从发了一篇<使用SVGA优化礼物动画>之后, 很多小伙伴一直在问我相关实现的问题.以及碰到了一些问题怎么解决? 趁现在时间上比较富裕的时候写一篇关于SVGA的实例使用SVGA实现上图效 ...
ae万能弹性表达式_外置常用ae插件快速掌握AE软件的精髓
相信经常用ae软件的小伙伴就知道,AE的强大之处就在于它的插件,它就像一个巨型的加工厂.所以,AE插件在AE软件的使用中是必不可少的. 鉴于AE插件的种类繁多,为了让影视后期爱好者在后续学习AE软件 ...
AEJoy —— 详解 AE 如何将 png 序列帧导出为 SVGA 动画文件
效果预览我在 PC 上用 OpenGL 实现了一个 svga 预览的程序 "闪烁"是原序列帧设计的问题 1.导入 png 序列帧至AE 从菜单栏 "导入" - ...
ae saber插件_【AE插件】用于做动画制作/设计的五个免费插件非常好用
本文提到的插件不是那种(你什么都不干,就指望它能马上帮你制作出酷炫动画的软件)而是那种真正能在商业动画制作方面中有所帮助,大家追求酷炫可以选择saber,orb等. 第五名:Textevo 文字标题弹 ...

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

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

最新文章

热门文章