UI动效转场设计
作者:暂无发布时间:2019年10月28日 14:44

1.打开软件AE,再将做好的PS文件拖到项目面板,【导入类型】设为【合成-保持图层大小】,在选择【合并图层样式到素材】。


2.在双击项目面板中导入的合成打开,选择电池电量条图层按【P】键调出位置属性先打上关键帧,在0帧在上移出画面在打上关键帧。在全选关键帧按【F9】添加缓动。


3.在选择我的图层再给【位置】打上关键帧,在前移到0帧再将位置右移出画面在打上关键帧。在全选关键帧按【F9】添加缓动。


4.按住【Shift】键选择图1到图5的图层,再给【位置】都打上关键帧,在前移到0帧再将【位置】下移出画面在打上关键帧。在全选关键帧按【F9】添加缓动。在打开全部图层的运动模糊开关。


5.再将图1到图5图层的关键帧按顺序下一层比上一层关键帧都后移一帧,将关键帧错开。


6.在选择图1到图5图层的关键帧,在点击图表进入,对关键帧的运动曲线进行调整。在使用【Motion2】插件调整运动速度。


7.再给顶部播放栏的【位置】也打上原始的关键帧,在前移到0帧在将【位置】下移出画面在打上关键帧,在全选关键帧按【F9】添加缓动。在打开图层的运动模糊开关。


8.在点击工具栏【文件】-【整理文件】-【收集文件】在点击【保存】。收集【全部】源文件。在进行文件命名保存文件。


9.同理在导入个人中心的PS文件到项目面板中,在双击打开。


10.在按【Shift】键同时选择所有的图层,在按【P】键调出位置属性给【位置】打上关键帧,在0帧再将所有图层的【位置】右移出画面在打上关键帧,在从上到下将下面一层的关键帧都比上一层的关键帧后移一帧,在全选关键帧按【F9】添加缓动。在打开全部图层的运动模糊开关。


11.在选择图1到图5图层的关键帧,在点击图表进入,对关键帧的运动曲线进行调整。


12.在将个人中心的合成从项目面板拖到推荐页里面,再将合成的时间轴后移,先给合成的【位置】打上关键帧,在前移到合成出现的位置再将合成右移出画面再给【位置】打上关键帧。在全选关键帧按【F9】添加缓动。在打开图层的运动模糊开关。


13.在全选合成的关键帧在点击图表进入,对关键帧的运动曲线进行调整。


14.在【Ctrl+N】新建一个合成,在【Ctrl+Y】新建一个白色纯色层,选择白色纯色层双击【椭圆工具】添加蒙版,再给【蒙版扩展】在0帧设为-80打上关键帧,后移几帧在设为0在打上关键帧。


15.在选择蒙版1【Ctrl+D】复制蒙版,再将蒙版2的模式选择【相减】,再给【蒙版扩展】第一帧设为-200,在将第二个关键帧后移。再将时间轴结束的位置前移。在全选关键帧按【F9】添加缓动。


16.在将合成1在项目面板重命名为点击事件,再将合成从项目面板拖入推荐页合成中,在右键合成选择【效果】-【生成】-【填充】,将颜色设为灰色。


17.再将点击事件合成的时间轴后移,再将【位置】移到左上角,在将【缩放】设为20%。


18.最终效果如图所示


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