怎么用AE制作界面交互动效
作者:暂无发布时间:2019年10月24日 17:11

1.选择【界面特效2.psd】导入到AE,双击打开该合成。打开【点击手势】图层,在【合成设置】中,把【宽度】跟【高度】都修改为100px,并把椭圆8移动到界面正中间。


2.在界面特效2合成中选择点击【点击手势】,把该图层放在中间偏上的位置。


3.点击【关闭】图层,拉动两条【参考线】,交叉点为【关闭】图层的中间,打开【关闭】图层,在【合成设置】中,把【宽度】跟【高度】都修改为100px,并把图形移动到刚才设定的界面。


4.点击新建,新建【形状图层】,选择【矩形工具】,绘制一个跟界面一样大小的矩形,点击【填充】,把图形填充为【白色】。点击【形状图层】中的【不透明度】,数值改为90%。 


5. 选择形状图层1,【Ctrl+D】复制一个图层为形状图层2,把【填充】颜色数值改为8C18FF。再【复制】一个形状图层为形状图层3,把【填充】颜色数值改为6A10CB。


6.将形状图层1新建一个【预合成】,命名为底_白。将形状图层2新建一个【预合成】,命名为中_浅蓝。将形状图层3新建一个【预合成】,命名为上_深蓝。点击底_白图层,把【不透明度】改为90%。全选这三个形状图层,拖动到关闭图层的下方。


7.点击【底_白】图层,选择【椭圆工具】画一个圆形的【遮罩】,调整至合适的大小及位置。选择这个蒙版的【蒙版路径】,在01s的位置设置一个关键帧,把这个关键帧拖到1秒15帧,把时间轴拖到,1秒的位置,选择【模板路径】,双击锚点,把框架拖到画面外边。


8.复制底_白合成的【蒙版1】到中_浅蓝合成中,点击中_浅蓝的【蒙版路径】,将两个【关键帧】往后面拖动三个帧的位置,调整至合适的位置及大小。


9.复制中_浅蓝合成的【蒙版1】到上_深蓝合成中,点击上_深蓝的【蒙版路径】,将两个【关键帧】往后面拖动三个帧的位置,调整至合适的位置及大小。


10.全选所有【关键帧】,点击【曲线调整】,调整它的运动曲线,并调整各个帧先快后慢的节奏。


11.把底_白合成,底_白合成。上_深蓝的全部【关键帧】往后面移动两秒的位置。选择点击手势合成,设置两个【不透明度】的关键帧,数值从0%到100%。设置【位置】的两个关键帧。运动路径以曲线的形式从中间到左上部分,再进入【曲线调节】调节它的曲线运动。再选择【缩放】选项。设置运动结尾部分的三个帧,第二个帧缩放设置为90.0,90.0%,第二个帧缩放设置为90.0,100.0%


12.选择点击手势合成中的【不透明度】,将02S跟03S之间设置两个个【关键帧】,第一个帧设置为100,100%,第二个帧为0,0%。


13.点击个人信息合成。 打开【位置】属性跟【不透明】属性,在两秒多一点的位置,设置位置的第一个关键帧为375.0,781.0,透明的第一个关键帧为0%,设置位置的第二个关键帧为375.0,667.0,透明的第二个关键帧为100%,然后再调节【位置】的运动曲线。


14.复制刚才做的四个【关键帧】,复制到上面的图层当中,将它们错开大约两帧的位置。如果播放时间较快,我们可以将这些关键帧全都选中。按住【Alt】的来拖动来延长时间。


15.选择个人头像合成中的【位置】属性,在03s旁边设置一个【关键帧】为375.0,667.0,在这个关键帧之前设置另一个帧的位置属性为547.0,667.0。在这两个帧中间再设置一个关键帧的位置属性为362.0,667.0。再进入【曲线调节】调节它的曲线运动。


16.选择个人头像合成中的【位置】属性,在03s旁边设置一个【关键帧】为375.0,667.0,在这个关键帧之前设置另一个帧的位置属性为547.0,667.0。在这两个帧中间再设置一个关键帧的位置属性为362.0,667.0。再进入【曲线调节】调节它的曲线运动。


17.把【游标】拖到04s的位置,选择个人头像、个人信息、关闭合成中的第三个关键帧,复制到04s旁边的位置,把第一个关键帧复制到后面的位置。


18.打开上、中、下三个合成的【蒙版路径】,把这三个合成的第二帧都复制到04s旁边,把这三个合成的第一帧都复制到05s旁边,并调节细节,使得过渡自然。


19.打开个人信息合成中的各个图层,选择【位置】跟【不透明度】,把各个图层的第二帧都复制到04s旁边,把这各个图层的第二帧都复制到04s后边,按【Alt】调节时间轴的长度。


20.打开点击手势合成,把【游标】移动到03s跟04s之间,打开【不透明度】属性,数值设置为100%并设置为一个关键帧,然后在这个帧前面设置一个不透明度为8%的关键帧。打开【位置】属性,在03s到04s之间, 设置从右上角到中间的运动路径,再进入【曲线调节】调节它的曲线运动。


21.调节上,中,下三个合成的运动曲线。调节个人信息合成里图层【位置】属性的运动曲线。


22. 将一个背景展示的psd再导入到ae当中,打开背景合成,把飞机1,飞机2分别新建一个【预合成】。打开飞机1的合成,在【合成设置】里将【背景颜色】设置为白色,【宽度】跟【高度】都设置为50px,把飞机图标拖动到合成的中心。打开飞机2的合成,在【合成设置】里将【背景颜色】设置为白色,【宽度】跟【高度】都设置为50px,把飞机图标拖动到合成的中心。


23. 打开飞机1合成中的【位置】属性,在0s旁边跟03s旁边设置两个【关键帧】,使得飞机运动路径从左上曲线运动到右下。打开【旋转】属性,在0s旁边设置属性为0x+0.0°,在03s旁边设置属性为0x+64.0°。


24.新建一个【形状图层】,选择【钢笔工具】, 画一个从左上到右下的运动路径,打开【填充选项】,关闭填充的效果。打开【描边选项】,填充灰色的效果。


25.点击形状图层展开它的属性,将【线段端点】和【线段连接】分别改为【圆头端点】和【圆角连接】,再增加一个虚线。 打开【修建路径1】在飞机运动的起始位置打一个关键帧,这个关键帧修建路径的结束,第一个位置的关键帧调节为0%,将时间轴拖拖到飞机结束运动的地方,然后将这个钢笔路径结束关键帧调整为大概90%。


26.点击形状图层1的【不透明度】属性,设置数值为70%。点击飞机2合成,设置跟飞机1相仿的运动路径,在设置一个新的形状图层2,设置跟形状图层1相仿。 


27.选择飞机1合成跟飞机2合成的【关键帧】分别加一个【缓动效果】。选择形状图层1,飞机1合成,形状图层2,飞机2合成,在第0s选择【不透明度】为0%设置一个关键帧,在0s旁边选择【不透明度】为70%设置一个关键帧。


28.选择形状图层1跟2,分别给两个图层的关键帧添加【缓动效果】。把飞机2合成跟形状图层2的关键帧向后移动,使得飞机1先运动。选择形状图层1,飞机1合成,形状图层2,飞机2合成,在最后一帧后面再设置一个【不透明度】为0%的关键帧。


29.点击界面动效果_2合成,拖入到2_背景合成的最上层,并调节该合成的【尺寸】跟【位置】,使其充满整个手机屏幕。


30.最终效果如图所示。


点击观看视频教程
AE-UI界面交互动效
中级拔高11126人已学视频时长:33:55
立即学习
特别声明:以上文章内容仅代表作者本人观点,不代表虎课网观点或立场。如有关于作品内容、版权或其它问题请与虎课网联系。
500+精品图书
20G学习素材
10000+实用笔刷
持续更新设计模板
立即领取

下载虎课APP

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

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习90000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了39,984
并提交了269份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 90000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证