如何用AE制作svg动画?
作者:wanrong发布时间:2021年04月08日 12:17

  你们知道如何利用AE软件来制作svg动画吗?只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质;其实,它就像PS一样,可以无限矢量放大;而svg更高级是可以用来制作矢量动画,现在很多软件和各大浏览器对svg已经十分友好了。

  

  那么,如果我们想利用AE来完成svg动画该怎么操作呢?我给大家准备一篇文档,一起来看看具体操作步骤吧!

  

  步骤如下:

  

  1、本节课程目的是学习AE制作svga动画,课程核心知识点是素材处理,序列图层,使用到的工具是Adobe XD和AE相结合。

  

  2、首先是了解什么是SVGA格式的动画,主要针对的是图片,通过记录每张图片的位移缩放等数据来实现动画,将前端程序的动画实现出来,首先是基础知识的了解,然后是图片的动画,如果有插件的话也可以用插件制作。

  

  3、然后有点方面就是实现的方式,首先是将AE和Animate的文件通过插件转化为SVGA的格式,然后通过程序在不同的终端进行实现。

  

  4、接着是产品的不足,插件蒙版等支持的效果比较差,推荐用图片的序列来进行解决。

  

  5、对于插件的使用和安装包都可以在官网上面找到,可以下载进行安装。

  

  6、官网上也有一些资源文章,可以对这个格式更加的了解,知道处理文件的优缺点。

  

  7、打开软件Adobe XD,将做好的png的图片格式的文件到导入进来,对每一个层命好名。

  

  8、接着【Ctrl+Shift+E】将图片进行导出,选择【设计】的模式,选择导出。

  

  9、打开软件AE,将通过Adobe XD导出的图片导入到AE中,新建合成,拖进合成中,调整好图层顺序和位置。

  

  10、选中后面光线的图层,点击【R】调出旋转属性,按住【Alt】键点击旋转前面的时钟,给图层添加【time*16】的表达式,使其一直转圈。

  

  11、选中上面的三层图层,【Ctrl+Shift+c】创建预合成,命名为弹窗主题。

  

  12、接着点击【S】选择缩放的属性,分别设为50,120,90,100依次打上关键帧,全选关键帧按【F9】添加缓动的效果。

  

  13、关闭背景图层的显示,选中合成按住【T】键调出透明度的属性,分别设为0和100依次打上关键帧。

  

  14、选择【窗口】-【扩展】-【SVGA】的插件,选择好输出的路径,选择2.0的格式开始转换。

  

  15、可以将转换好的文件在官网上面进行预览,查看效果。

  

  16、接着在AE中打开一个背景图层,【Ctrl+D】复制一层,给上面的一层添加【模拟】-【CC Bubbles】气泡的效果。

  

  17、关闭背景图层的显示,【Ctrl+M】对泡泡的图层渲染【PNG】的序列,勾选Alpha通道,点击渲染保存。

  

  18、接着将渲染好的序列图片导入AE合成中,全选所有的图层,右键选择【关键帧辅助】-【序列图层】,将其依次排列,将合成拖入前面的合成中,右键选择【时间】-【时间反向图层】。

  

  19、选择【窗口】-【扩展】-【SVGA】的插件,选择好输出的路径,选择2.0的格式开始转换。

  

  20、可以将转换好的文件在官网上面进行预览,查看效果。本节课程结束,希望大家积极提交作业。

  

  以上就是我们利用AE和Adobe XD完成的svg动画。效果总体来说还是不错的。再告诉大家一个小技巧,我们还可以下载svg图片,导入到这里来编辑添加动画,然后再导出;这样整个画面看起来就会十分丰富了。感兴趣的同学可以在课下多加练习,今天就到这里了,再见!

  

  本篇文章使用以下硬件型号:联想小新Air15;系统版本:win10;软件版本:Adobe XD AE(2018)。

特别声明:以上文章内容仅代表作者wanrong本人观点,不代表虎课网观点或立场。如有关于作品内容、版权或其它问题请与虎课网联系。
500+精品图书
20G学习素材
10000+实用笔刷
持续更新设计模板
立即领取

下载虎课APP

随时随地学技能
APP更方便
每天免费学课程
下载虎课网APP
随时随地学海量会员教程
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:400-862-9191工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课
积分

恭喜你,领取成功

开课时间:

新人免费领取免费¥99

扫码开通训练营权限

打开微信“扫一扫”功能
扫码上方二维码

免费学习76000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了91,458
并提交了866份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
恭喜!签到成功,获得 10 个虎课币
上上签 ·21August.2018
尽管眼下十分艰难,可日后这段经历说不定就会开花结果
— 唐代文学家 韩愈
训练营坚持完成打卡任务 报名费全额返更多>>
直播公开课学员好评率95%以上更多>>
登录虎课网,每天免费学课程全站 76000+ 视频会员教程 | 每日可免费学 1