ae图片制作简单的动效(ae怎么做简单的动态效果)

还是先来看最终效果!

工具以AE为主,PS加以辅助就可以搞定。

涉及的知识点不多,主要有以下几点:

  1. 会PS的基本操作。

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

  3. 知道AE的缓动曲线(还是挺简单的)。

  4. 坚持与细心。

准备好了那就开始吧!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(0)

相关推荐

  • 怎样利用AE设计一个ICONS动效

    巧用AE设计一套ICONS动效. 炒鸡简单,值得借鉴,希望各位有兴趣的朋友都学以致用

  • 切换动效制作【做作业】

    今天我们的作业的是一个切换动效的制作,页面的排版非常简单.希望各位童鞋能够认真的完成哦! 小提示:1.新建800*600px的画布 2.小的物体智能对象放大后会模糊 3.注意节奏和停顿大家可以自己在这 ...

  • 小动效临摹【做作业】

    之前很多同学说东西的作业太难了,今天我们来个简单的.很简单的旋转位移放大缩小 记住画布不要太大,我们还是老规矩的800*600. 动效玩的6的同学可以自己发挥着改一下 要求:提交的作业在背景的右下角或 ...

  • loading动效AE教程

    大家好久不见了,銮銮这次给大家带来一个AE小教程,该Loading效果来自Dribbble的 Aaron Iker的作品.这个loading不仅好看,还容易制作.我不但会教会你们怎么制作 还会教会你们 ...

  • pr简单字体动效小效果

    简单pr字体小效果 操作方法 01 打开pr,新建序列 02 新建字幕并将其拖到时间线上 03 在字幕条的尾端拖动,可以更改字幕条的时间长短 04 将字幕条设置为5s和2s.鼠标点击字幕条,并将指示器 ...

  • AE基础动效快速入门秘籍

    一个合格的UI设计师,动效必须会做.动效有啥用?让你的老板,团队,甚至客户,在产品未上线前知道它是怎么玩的,促进感情,友好沟通必备神技能.当然,用来装装B也很好.. AE做动效,说实话 很方便,其实也 ...

  • 巧用AE设计MG动效制作 sports car

    巧用AE设计MG动效制作 sports car!简单粗暴,蛮实用的

  • 如何准确的向工程师传达动效设计?

    小编:最近好像一直在分享设计师与别的部分的巧妙配合的技巧,那么依旧继续.今天给大家带来的是由CocoaChina分享的如何准确的向工程师传达动效设计?在UI设计中,动效的设计十分的重要,在你与我中传递 ...

  • 实用动效技能靠这篇搞定

    对如今的UX设计师来说,会点动效什么的基本已是常规操作了.作为UX设计师,动效可以辅助的产出可以涵盖界面交互动效.项目宣传MG动画.产品吉祥物表情包.年终汇报PPT等等.这些技能点虽然广,但是只需要掌 ...

  • 教UI系列教程 – 组合粒子动效

    本教程分享的是"粒子组合动效"的制作方法,教程中使用粒子插件"form" 调整参数和优化粒子效果来实现此动效的制作.简单容易上手操作,能够应用在多种场景之中. ...