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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
AE教程!简单清新的动效教程
0.0°
2018-06-26 好文转载 教程 原作者: IX男神 举报 7882 43 37 4

工具以AE为主,PS加以辅助就可以搞定。涉及的知识点不多,主要有以下几点:

会PS的基本操作。 会些AE的基本操作,理解时间轴的概念并知道如何打关键帧。


准备好了那就开始吧!

Image title

1. 打开AE,新建项目-新建合成,合成命名为动效,尺寸800*600px,时间设置为12秒,颜色设为#FFF0ED。

Image title

2. 使用圆角矩形工具绘制314*136px的圆角矩形,将该圆角矩形圆角拖动到最大并且居中,在本图层下拉三角中可以调整各项属性填充颜色为纯白色。

Image title


给圆角矩形加上阴影,选中图层,右键-效果-透视-阴影。

Image title

3. 箭头和感叹号及对号我是在PS中绘制的然后导入AE,当然也可以在AE中绘制。绘制的方法很简单,大小上在PS中也是新建同样大小画布,部件的大小则要根据圆角矩形的大小来定,没什么技巧可言不再赘述。导出的时候记得隐藏背景,格式为PNG。

Image title

我们回到AE,Ctrl+i导入刚储存的图片,然后直接全选中拖动到动效预合成中做准备。

Image title

到这一步准备工作基本完毕,还有一个圆圈我们边做边说。

Image title

坚持到这一步的同学要恭喜你们了,因为要开始尝鲜了~虽然说这个动画不长,但是也是由不少的关键帧组接起来的,文字教程没有办法一个帧一个帧的讲解,所以我主要讲方法,如何开始以及转折部分该怎么办,怎么样去分析,方法学会了触类旁通。当然我也会尽可能的讲的细致,谢谢!

1. 通过观察可以知道,刚开始有一个点击的动作,这一步我的思路是复制一层我们的圆角矩形,然后把复制的这一层填充#FAFAFA,点击的感觉在这里涉及到大小、圆度、不透明度变化。注意开始到结束数值的变化。(不透明的最后一帧调为0)

Image title

2. 下一步要用到蓝色圆圈,所以我们先来准备圆圈。在不选中任何图层的情况下直接画圆,大小合适即可,不要填充只要描边,描边颜色为#22A7C2,粗细6px。注意居中,如果没有居中可以在窗口-对齐,也可以摁Ctrl+Alt+Home居中锚点。

Image title

接下来让它旋转,类似loading,在本图层下拉三角中找到内容-椭圆-描边-线段端点-圆头端点。然后打开添加选中-修剪路径。

Image title

在修剪路径中打关键帧保持个缺口。

Image title

然后摁下R调出旋转属性,设置一个初始的旋转角度,打关键帧,然后你想让它旋转到几秒钟就在那里打上关键帧即可,当然也要同时修改旋转的最终角度。然后播放一下试试?

Image title

3. 点击过后,紧接着就是一个箭头和圆圈的交替以及圆角矩形到圆的变化。

① 箭头涉及到一个旋转以及透明度的变化。

② 圆圈涉及到大小和透明度变化。

③ 圆角矩形只有一个大小变化。

Image title

Image title

4. 适当的转两圈,接下来就是由圆圈转化到感叹号了。几乎是四个动作同时进行。

① 圆圈在旋转的过程中缩小,透明度降低至最低。

② 感叹号是一个旋转和透明度由低到高。

③ 白色色块颜色转变为红色。

④ 转化为红色后和感叹号一起的晃动。

Image title

接下来将上一步中的①②③反过来就可以做到接下来的效果~

Image title

5. 在转两三圈之后,又是一个颜色过渡和透明度变化,加上旋转和大小的变化。

① 圆圈在旋转的过程中缩小,透明度降低至最低。

② 对号有个旋转以及透明度由低到高。

③ 白色色块颜色转变为绿色。

Image title

然后保持1秒钟左右不动,接下来就是绿色色块变大直到覆盖整个画面,在绿块变大一到两帧之后对号同时缩小,透明度降低至消失。

Image title

6. 接下来就是覆盖整个画面的绿块缩小的过程,和一个箭头和白块同时回归到最初的过程。

① 覆盖整个画面的绿块缩小至圆圈大小后颜色快速转变为白色。

② 白色逐渐形变为最初的样子(可以直接选中想要复制的帧,时间指针停在想要复制的位置复制粘贴)。

③ 指针和白块同时变化,旋转和透明度的变化。

Image title

和第一帧衔接好了就基本完成了,但是有些动作是有些僵硬的。

Image title

所以接下来就会需要我们根据需要转化锚点,调节曲线控制速度了。

Image title

1. 曲线的调整,先简单的说下怎么调吧。

很简单,选中你想要调节的锚点摁F9,你会发现本来的小圆点变成一个个小漏斗形状的了。

然后选中你想要调节的地方;

Image title

点击这里进入曲线编辑器,然后按图设置试着拖动下再回去预览看看?你就会发现神奇的一幕。

Image title

2. 通过观察上边的曲线就可以知道,这样是把动作变得柔和,有一个缓进缓出的节奏,在这里我建议大家把所有的锚点全部转化。预览下看看,不需要转化的锚点可以摁住Ctrl加鼠标单击转化回来。但是这样子和我们需要细节上还是有一定的差距,所以呢,请看图。明白了么?

Image title

3. 把数值写上做起来固然很方便,但是真的是不建议那种学习方式学习到一个案例然后会一堆案例才有效率,比如APP的动效其实用到的就那几个东西,位移缩放旋转透明度什么的,还有曲线的调节。但是很多人不会,其实大胆尝试,动动脑子,多多实践就OK(很多时候我也常这么劝自己~)

废话不多说,看看最后的效果吧~

Image title



























更新:2018-06-26

收藏

43人已收藏

洛诺言

小白领取资源加微:13340016495,备注软件

  • 121

    作品

  • 536

    粉丝

  • 2

    关注

  • PS教程:侏罗纪海底世界海报合成
  • Adobe CC 2020专业版软件,一键下载安装教程
  • PS创意美味的饼干字体教程
  • 设计师8个技巧做好深色主题设计

    猜你喜欢

      2018-06-26 好文转载 教程 原作者: IX男神 举报 7882 43 37 4

      AE教程!简单清新的动效教程

      0.0°

      你确定要举报AE教程!简单清新的动效教程

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年06月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      37
      43
      4

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

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

      登录

      手机号

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

      登录
      第三方账号登录