恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
AE实操:界面交互动画全流程!
0.0°
2020-01-09 原创文章 教程 举报 3195 30 10 7

界面交互动画全流程!

今天米醋给大家打来了一款AE实操案例--智能界面交互动画,跟着米醋一步步进行学习吧!

我们先来看一下最终的动态效果图




点击视频即可观看



在软件PS中观察了解案例图层,如图所示。


打开软件AE,把【PSD】素材文件拽入到AE中,选择【合成-保持图层大小】-【可编辑图层样式到素材】,双击合文件观察图层,如图所示。


选择【状态栏】图层,在10F的【位置】打上一个关键帧,选择关键帧,添加【F9】缓动缓出,调整【曲线】,输入【文字内容】调整【填充色】,如图所示。


选择文字输入位置,选择【效果】-【文本】-【编号】,调整【编号】字体,如图所示。


修改项目视图中的编号参数,在1秒钟位置添加关键帧,调整【数值】为244.按【空格键】进行预览观察,如图所示。


在1秒关键帧修改【编号】参数的【填充颜色】,按【空格键】进行预览观察,如图所示。


选择【开关按钮】图层,添加【S】缩放在20f添加关键,后移打上关键,调整【缩放】为【110】,再后移添加关键帧,添加【F9】缓动换入,调整【编辑速率图标】曲线,如图所示。


双击【首页】,选择【状态栏】在10F打上关键帧,把【状态栏】移动至上方,添加【F9】缓动缓出,调整曲线,如图所示。


选择【大圆】在10F打上【缩放】关键帧,在开始关键帧【缩放】调整为【0%】,如图所示。


把【点光】选择【大圆】为【父级】,调整【点光】中心点位置为大圆中心,如图所示。


选择【点光】图层,添加【旋转】,在1秒钟添加一个关键帧,【旋转】参数调整为【1】,按【空格键】进行预览观察,如图所示。


选择【点光】图层,旋转添加【F9】缓动缓入,在3秒钟添加关键帧,修改【旋转】为【4】,按【空格键】进行预览观察,如图所示。


选择【tab】在10f添加【位置】关键帧,把【tab】移动至下方,把【开关】的父级设置为【tab】,添加【F9】缓入缓出,调整【曲线】,如图所示。


选择【数据信息】和【功能按钮】图层,添加【T】不透明度开始关键帧为【0%】,按【空格键】进行预览观察,如图所示。


选择【首页】图层,在1秒添加关键帧,调整【T】不透明度,如图所示。


双击进入【浮层】,把【滑动按钮】、【进度完成】、【进度】、【组1】设置父级为【背景】,在10F【P】位置添加一个关键帧,移动【背景】到下方,如图所示。


选择【背景】图层的【蒙版路径】,使用【钢笔工具】通过【锚点】,调整【背景】图层的形状,如图所示。


选择【首页】图层,调整关键帧位置,添加【U】模糊,【Ctrl+C】复制模糊第一帧,【Ctrl+V】粘贴到结束关键帧,如图所示。


添加【亮度和对比度】,调整关键帧位置,【Ctrl+C】复制亮度第一帧,【Ctrl+V】粘贴到结束关键帧,如图所示。


修改【高斯模糊】,调整【合成设置】,修改【持续时间】,添加素材【手机壳】,如图所示。


拖拽【空气净化器】到素材,【S】缩放图层,点击【效果】-【扭曲】-【边角定位】,通过【顶点】调整【工期净化器】的位置,如图所示。


选择【Ctrl+M】渲染图层,导出【avi】格式素材文件,打开PS软件,添加【avi】格式素材文件,【Ctrl+Shift+Atl+S】存储为Web所用格式保存为【GIF】文件,参数如图所示。


完成制作,最终效果如图所示。


最后完成的动画效果


 



好啦!今天就分享到这里!

你学会了吗?


回复【AE教程】获取全套AE动效视频课程




Powered by Froala Editor

更新:2020-01-09

收藏

30人已收藏

  • 63

    作品

  • 6880

    粉丝

  • 0

    关注

  • 提UI设计的8个技巧
  • 这些3D素材生成器,让我果断放弃了C4D!
  • 8点了解栅格系统的应用
  • 大厂都在用的10个防呆设计法则!
相关标签

    猜你喜欢

      2020-01-09 原创文章 教程 举报 3195 30 10 7

      AE实操:界面交互动画全流程!

      0.0°

      你确定要举报AE实操:界面交互动画全流程!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年01月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      30
      7

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录