APP界面动效转场设计
作者:暂无发布时间:2019年11月07日 11:05

1.打开“AE”,将“蔬菜首页.psd”拖入到【合成】中,在弹出的窗口中,导入种类选择“合成—保持图层大小”,图层选项选择“合并图层样式到素材”,点击【确定】按钮。双击【蔬菜首页】合成,打开“图层顺序”。

2.点击【蒙版】图层、【ICON树叶】图层、【树叶】图层、【ICON水果】图层、【生鲜水果】图层、【ICON市场】图层、【市场2】图层前的小眼睛,隐藏图层;选择【电量条】图层,按“P”键,打开“位置”属性,制作一个“关键帧”,数值为“394.0,-14.0”;将指针向后移动位置,再次制作一个“关键帧”,关键帧的位置为“394.0,46.0”;选中关键帧,按“F9”键,为“关键帧”添加“缓动”;打开“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果。

3.选择【搜索栏】图层,按“P”键,打开“位置”属性,同时按住“Shift+T”键,打开“不透明度”属性,在“位置”属性为“375.5,169.0”的位置上制作一个关键帧,在此位置上制作一个“不透明度”的关键帧,透明度为“0”;将指针移动到“位置”属性为“375.5,139.0”的位置上,将透明度的值调为“100”;选中关键帧,按“F9”键,为“关键帧”添加“缓动”;打开“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果。

4.制作大标题的效果。选中【大标题】图层,按“P”键,打开“位置”属性,制作一个关键帧,关键帧数值为“-173.5,373.5”,将指针往后拖动,再次制作一个关键帧,关键帧数值为“186.5,373.5”,选中关键帧,按“F9”键,为“关键帧”添加“缓动”;打开“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果。

5.选择【矩形1】图层,按“P”键,打开“位置”属性,将【矩形1】图层内的内容拖至屏幕之外,位置属性数值为“378.0,-380”;将指针向后移动,再次添加关键帧,位置属性数值为“378.0,325.0”,选中关键帧,按“F9”键,为“关键帧”添加“缓动”;打开“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果,进行细节调整。打开已经安装好的【Motion2】插件,选中位置的两个关键帧,调节左边带有“朝左箭头”和“朝右箭头”的参数,数值自行调节;调节完成后,将【大标题】图层、【搜索栏】图层、【电量条】图层进行调节;进行细微调节。选中【矩形1】图层的位置关键帧,打开【图表编辑器】,调整“运动曲线”,调整运动曲线的值。最后,按“Ctrl+S”,保存项目,文件名称为“课件3.aep”,保存位置为“桌面”,点击“存储”按钮,在弹出的【收集文件】对话框中,收集源文件选择“全部”,单击“收集”按钮,在弹出的对话框中选择“存储”按钮,即可保存完成。 

6.选择【今日新鲜】图层,按“P”键,打开“位置”属性,制作一个关键帧,位置属性数值为“-96.5,691.5”,;将指针向后拖动,再次制作关键帧,关键帧位置属性数值为“92.5,691.5”;选中关键帧,点击“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果;按“F9”键,为“关键帧”添加“缓动”;打开【Motion2】插件,进行曲线调整,数值如图所示。

7.选择【内容1】图层,按“P”键,打开“位置”属性;同时按住“Shift+T”键,打开“不透明度”属性;同时制作一个关键帧,位置属性数值为“375.5,973.0”,不透明度值为“0”;将指针向后拖动,再次制作关键帧,关键帧位置属性数值为“375.5,897”,不透明度值为“100”;选中关键帧,按“F9”键,为“关键帧”添加“缓动”;打开【Motion2】插件,进行曲线调整,数值如图所示,按“Ctrl+S”,保存。

8.选择【每日新鲜】图层,按“P”键,打开“位置”属性;制作一个关键帧,关键帧位置属性数值为“-82.0,1101.0”;向后拖动指针,再次制作关键帧,关键帧位置属性数值为“93.0,1101.0”,选中关键帧,将指针向后拖动,再次制作关键帧,关键帧位置属性数值为“375.5,897”,不透明度值为“100”;打开【Motion2】插件,进行曲线调整,数值如图所示。

9.选择【内容2】图层,按“P”键,打开“位置”属性;同时按住“Shift+T”键,打开“不透明度”属性;同时制作一个关键帧,关键帧位置属性数值为“377.0,1406.0”,不透明度值为“0”;将指针向后拖动,再次制作关键帧,关键帧位置属性数值为“377.0,1321.0”,不透明度值为“100”;将指针向后拖动,再次制作关键帧,关键帧位置属性数值为“375.5,897”,不透明度值为“100”;选中关键帧,打开“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果;打开【Motion2】插件,进行曲线调整,数值如图所示,进行细节调整,按“空格键或者O键”进行播放。

10.选中【点击】图层,将【底部按钮】图层作为【点击】图层的父级,点击【点击】图层右边的【小蜗牛】,拉动至【底部按钮】图层,将其链接;选中【底部按钮】图层,按“P”键,打开“位置”属性;制作一个关键帧,关键帧位置属性数值为“378.0,1726.5”;将指针向后拖动,再次制作关键帧,关键帧位置属性数值为“378.0,1550.5”;选中关键帧,按“F9”键,为“关键帧”添加“缓动”;打开“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果;打开【Motion2】插件,进行曲线调整,数值如图所示;打开【图表编辑器】,进行曲线调整。

11.按“Ctrl+N”,新建【合成】;单击“确定”按钮;选择【合成1】,右键点击,选择“重命名”命令,重命名为“点击效果”;按“Ctrl+Y”,创建固态层;在弹出的【纯色设置】对话框中,将宽度和高度设置为“500px”,点击“确定”按钮;选中【白色 纯色1】图层,右键点击,选择【预合成】命令,在弹出的【预合成】对话框中,修改【新合成名称】为“点击效果”,单击“确定”按钮;双击【白色 纯色1】图层,进入该图层;双击顶部的“椭圆工具”,即可在舞台绘制一个椭圆;点击【蒙版1】左侧的小三角,选择【蒙版扩展】前的“计时器”,制作一个关机帧,数值为“-68。0”;将指针向后拖动,再次制作关键帧,数值为“1.0”;点击【蒙版2】后面的小箭头,选择【相减】值;选择【蒙版扩展】两个关键帧的位置,向后拖动调整位置;进行细节调整;选中关键帧,按“F9”键,为“关键帧”添加“缓动”;打开“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果;打开【Motion2】插件,进行曲线调整,数值自行调整;选中关键帧,右键单击,选择【关键帧插值】,【临时插值】选择“线性”,单击“确定”按钮。

12.回到【蔬果首页】,将【点击效果】拖入其中,右键单击【效果】—【生成】—【填充】,更改颜色为“绿色”;按“S”键,打开“缩放”属性,将其移至底部按钮位置,缩放数值为“19.0,19.0”;更改颜色为“白色”。

13.点击【蒙版】图层前的小眼睛,显示图层;按“T”键,显示不透明度属性,制作一个关键帧,透明度值为0;将指针向后移动,再次制作关键帧,透明度值为100;选中关键帧,按“F9”键,为“关键帧”添加“缓动”;打开“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果。选择【点击】图层,点击“变换”前的小三角,点击【旋转】前的“计时器”,制作关键帧,旋转数值为“45°”,选中关键帧,按“F9”键,为“关键帧”添加“缓动”;打开“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果;打开【Motion2】插件,进行曲线调整,数值自行调整。

14.点击【ICON树叶】图层、【树叶】图层、【ICON水果】图层、【生鲜水果】图层、【ICON市场】图层、【市场2】图层前的小眼睛,显示图层;按住“Ctrl”键,同时选中【ICON树叶】图层、【树叶】图层、【ICON水果】图层、【生鲜水果】图层、【ICON市场】图层、【市场2】图层,右键单击,选择【预合成】命令,弹出【预合成】窗口,修改【预合成名称】为“图标”,单击“确定”按钮。

15.双击进入【图标】预合成,进行动画的制作;在【舞台】左侧空白处【右击】—【新建】—【调整图层】,将【调整图层1】移至所有图层的最上方;在【效果与预设】面板中,搜索【高斯模糊】特效,将其拖动到【调整图层1】上,模糊值调整至“70”;在【效果与预设】面板中,搜索【简单阻塞工具】特效,将其拖动到【调整图层1】上,阻塞遮罩值调整至“-19.60”;将【树叶】图层、【市场2】图层、【生鲜水果】图层调整位置至【调整图层1】之上;点击【生鲜水果】图层上的【小蜗牛】到【ICON水果】图层上;点击【树叶】图层上的【小蜗牛】到【ICON树叶】图层上;点击【市场2】图层上的【小蜗牛】到【ICON市场】图层上。

16.回到【蔬菜首页】,确定发射位置;回到【图表】图层,先取消【生鲜水果】、【树叶】、【市场2】图层的父子层级关系;按住“Ctrl”键同时选中【ICON树叶】、【ICON市场】、【ICON水果】图层;按“P”键,显示位移属性;同时制作一个关键帧,数值为“380.0,1510.0”;将指针向后移动,选择【ICON树叶】图层,关键帧数值为“380.0,1302.0”;选择【ICON水果】图层,关键帧数值为“137.0,1302.5”;选择【ICO市场】图层,关键帧数值为“610.0,1306.0”;点击【生鲜水果】图层上的【小蜗牛】到【ICON水果】图层上;点击【树叶】图层上的【小蜗牛】到【ICON树叶】图层上;点击【市场2】图层上的【小蜗牛】到【ICON市场】图层上;选中【ICON水果】、【ICON树叶】、【ICON市场】图层的关键帧,按“F9”键,添加缓动;选中【生鲜水果】、【树叶】、【市场2】图层,按“T”键打开【不透明度】属性,制作一个关键帧,不透明度的值为“0”;将指针向后移动,再次制作关键帧,不透明度的值为“100”,选中三个图层不透明度关键帧,按“F9”键,添加缓动;选取【ICON水果】、【ICON树叶】、【ICON市场】图层的关键帧,在【Motion2】中点击【BLEND】按钮,即可完成弹动效果。

17.回到【蔬果首页】,选中【点击效果】,按“Ctrl+D”,复制一层,将【点击效果】1移至右边红色的按钮上,给它一个【点击】效果,调整合适位置;调整【弹动】效果,利用表达式;按住“Alt”键点击【ICON树叶】图层【位置】前的“计时器”将要使用的“弹性表达式”粘贴进去,调整适合数值;将表达式全选,按“Ctrl+C”复制,按住“Alt”键点击【ICON水果】图层【位置】前的“计时器”将要使用的“弹性表达式”粘贴进去;将表达式全选,按“Ctrl+C”复制,按住“Alt”键点击【ICON市场】图层【位置】前的“计时器”将要使用的“弹性表达式”粘贴进去;将【蔬果首页】所有图层选中,点击【右键】—【预合成】,修改名称为【动画1】,点击“确定”按钮,按“Ctrl+S”保存。

18.将【蔬果市场.psd】拖入到【项目】窗口,保持默认设置,单击“确定”按钮;双击【蔬果市场】合成,选择【电量条】图层,按“P”键,打开“位置”属性,制作一个“关键帧”,数值为“394.0,-16.0”;将指针向后移动位置,再次制作一个“关键帧”,关键帧的位置为“394.0,46.0”;选中关键帧,打开“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果;选择【顶部】图层,按“P”键,打开“位置”属性,制作一个“关键帧”,数值为“378.0,-243.0”;将指针向后移动位置,再次制作一个“关键帧”,关键帧的位置为“378.0,26.0”;选中关键帧,打开“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果;点击【电量条】图层的【小蜗牛】按钮,拖动至【顶部】图层,打开【Motion2】插件,进行曲线调整。

19.选中【圆角矩形1】图层的【小蜗牛】,拖动至【滑动文字】图层,选中【滑动文字】图层,按“P”键,打开“位置”属性,制作一个“关键帧”,数值为“1135.5,218.5”;将指针向后移动位置,再次制作一个“关键帧”,关键帧的位置为“389.5,218.5”;选中关键帧,打开“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果;打开【Motion2】插件,进行曲线调整。

20.选中【图1】、【图2】图层,按“P”键,打开“位置”属性,制作一个“关键帧”,【图1】图层数值为“373.5,1894.0”,【图2】图层数值为“373.5,2548.0”;将指针向后移动位置,再次制作一个“关键帧”,【图1】图层数值为“373.5,595.0”,【图2】图层数值为“373.5,1248.0”;打开“运动模糊”按钮,为“关键帧”移动添加“运动模糊”效果;打开【Motion2】插件,进行曲线调整;点击【点赞】图层右边的【小蜗牛】按钮,拖动至【图1】图层,进行父级链接;进行细节调整,选中【图1】、【图2】图层的关键帧,将关键帧向后延长一些,将【图1】和【图2】图层的关键帧形成错帧,

21.选中【底部】图层,按“P”键,打开“位置”属性,制作一个“关键帧”,关键帧数值数值为“329.0,1288.0”;将指针向后移动位置,再次制作一个“关键帧”,关键帧的位置为“329.0,1523.0”;选中关键帧,打开“运动模糊”按钮;打开【Motion2】插件,进行曲线调整。

22.将事先制作好的【点击效果】合成拖入【图层】面板中,选中【点击效果】图层,单击【右键】—【效果】—【生成】—【填充】,修改颜色为“绿色”,点击“确定”;按“S”键,打开缩放属性,制作一个关键帧,缩放数值为“17.0,17.0”,将【点击效果】移至点赞效果图;绘制心形,选择“钢笔工具”,绘制一个心形,为“心形”添加颜色;选中【形状图层1】,将中心点调整至中心,进行缩放,缩放值为“104.0,104.0”;选中【点赞】图层,制作一个关键帧,缩放数值为“100.0,100.0” ,将指针向后移动位置,再次制作一个“关键帧”,缩放数值为“0, 0”;按“T”键,打开不透明度,设置不透明度;选中【形状图层1】图层,按“S”键,打开缩放属性,制作一个关键帧,缩放数值为“136.0,136.0”;将指针向后移动位置,再次制作一个“关键帧”,缩放数值为“104.0, 104.0”。

23.点击【Motion2】插件,点击【BURST】按钮,添加一个【Burst】图层,选中【Burst】图层,点击上方的【描边】工具,选择第一个,去除描边,点击“确定”;按“S”键,打开缩放属性,制作一个关键帧,缩放数值为“15.0,15.0”;按“P”键,打开“位置”属性,调整位置;在【效果空间brust】窗口中调整数值,“#of Copies”值为10,“Brust Width”值为41,“Brust Height”值为45,同时制作一个关键帧,按“U”键,显示所有关键帧,进行相关参数的调整。

24.点击【项目】窗口,将【蔬菜市场】合成拖入到【图层】面板,延长时间线,【蔬菜市场】图层移至顶部,按“P”键,打开“位置”属性,调整位置从右向左出现;打开【Motion2】插件,进行曲线调整;选中关键帧,打开【图表编辑器】,进行曲线调整。

25.制作完成后,导出文件。【文件】—【导出】—【添加到渲染队列】,保持默认设置,点击【渲染】按钮。

26.最终效果如图所示。


点击观看视频教程
UI-APP界面动效转场设计
中级拔高10807人已学视频时长:1:06:45
立即学习
特别声明:以上文章内容仅代表作者本人观点,不代表虎课网观点或立场。如有关于作品内容、版权或其它问题请与虎课网联系。
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,771
并提交了300份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 90000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证