动效小制作2在线视频

接下来在我们界面中

出现了一个弹跳的小球

以及它从这儿嗖地一下

然后就不见了

然后就从上面落下来

然后我也希望

这个东西其实也不算特别难

我也希望就通过这个简单的动效

来带领大家走入动效的大门

那么接下来

我们打开AE

直接开始

学习这个动效的制作吧

那我们现在打开了AE

首先我们需要

文件

新建

新建你们是新建合成的

新建合成项目

这里点一下

然后我们把合成的名字改成

弹跳的小球

预设点自定义

然后高宽填600px乘以500px

帧数这边都不用调

然后时间改成5秒左右

因为这个东西不是特别的长

然后时间长了

对我们的编辑起来特别不方便

然后背景也是我们就选择黑色

或者其它颜色

你喜欢这样

然后点确定

我们这里就出现了一个合成的项目

然后首先我们需要做一个地平线

给我们参考

然后这里有个标尺

我们可以直接拉一个参考线出来

如果没有一点开视图

然后显示

显示标尺

然后我们的标尺就出来了

我们拉一根地平线

这里左右吧

然后现在我们需要画一个小球

小球怎么画呢

我们用这个矩形工具

然后长按它

就会出现一排

各种各样的的那个形状工具

我们点椭圆工具

摁住shift键

拉一个小球

拉完之后

我们发现这个中心点是不是没有对上

这是小球的一个中心点的意思

然后我们点击这个工具

现在没有出来

我们再点一下它

然后看到小球的中心点

我将它移到小球的正下方

因为我们小球是从上面弹下来的

所以说我们形变也是要以底下为基准

然后这个时候再给大家对齐到中间

然后颜色我们可以给小球调一个

更加好看一点的颜色

就这样

是不是有点大

可以点这里多缩放一下

按住shift键

然后首先我们可以看到

这个小球是由上往下弹的

所以我们需要先把小球移到最上方

就是场面之外

刚刚我们看一下它的中心点

小球中心点没有对准

可以点一下

这里有个插件工具

你们可以下载一下

叫RepositionAnchorPoint

这个非常方便好用的

能够帮助我们对准这个工具的一个

一个中心点

首先我们先将小球移到外面

After Effects它主要的工作原理

就是通过记录感帧

就是记录这些运动物体的一个关键帧

来实现它的一个运动效果

首先我们点开这底下有个变换

然后位置

给它打一个关键帧

然后从上落下来

我们给它一个实帧的效果

移动实帧主要摁住Shift Command+左键

然后啊我们的这个轴移动实帧

然后这个时候我们再给它打一个关键帧

但这两个关键帧现在都是一样的

所以说小球并不会运动

然后我们把它移到第二个关键帧上

将小球往下移

移到这个参考线这里

它会自动吸入

那这时我们就可以看到小球一个下落的过程

但是刚刚我们说的原理是什么

原理就是要遵循自然界的运动规律

所以小球下落必然是越来越快的

这个时候给它加一个04:26

04:26 就给它加了一个缓入缓出的效果

但是还不够生动

自然界自由落体当然是

一个越来越快的过程

于是我们调出它的速度值编辑图表

我们选择这两个关键帧

你们看到的话

就点击旁边这个编辑速度值图表

不要选择其它图表

啊太小了我们打开点这个

让它更加大一点

这是它的一个速度曲线

我们看到这里是零

代表它的速度是零

然后这里就是越来

越大越来越大越来越大

表示它速度越来越快

所以这个峰值越大 越高

它的速度就越快

而我们需要让它有一个越来越快的效果

我们就需要让大家后段时间部分

速度达到最大

这一块给往后挪

那就是回到我们这里

我们一看

是不是小球

是有一个非常快地砸下来的效果

然后

然后砸下来

那是自然界中物体运动必然砸下来

会有一个形变

这个时候我们需要让它速度进来的时候

给它一个缩放的效果

把这个小铁链点开

不然它会一起成比例地缩放

首先我们可以看到

我们这边由上面运动下来

是一个变成一个梭形的小球了

就代表它是一个非常有速度感的东西

这个时候我们可以给它添加一个

这个是横向运动

让它竖向变得窄一点

我们给它一个趋势

但是 但是这个要遵循一个原理

就是体积一样

我们缩放的时候

这时候这边就要改成130

让它俩加起来是200

运动运动运动下来

运动下来之后

它一个梭形直接砸到地面上

太丑了

就是我们需要给它增加一个

就给它增加一个

就是砸到地面上

变成一个平面的

变成一个扁平的球

就像这样一样

砸砸砸砸砸下来

然后变成一个扁平的球

这边这个关键帧

其实也没有必要记录

就让它一路下来

变成一个扁平的06:50

还是给它记录一下

这样能够避免误差

这个时候我们给它70乘以130

我们让它变成一个横向的小球

横向的小球

把这边缩缩缩

130那就120

乘以80

因为因为物体运动是一个

势能在不断减少的过程

有没有发现

就是 小球落下来

由一个锥形变成了一个扁平化的形状

然后由扁平化

之后之后我们需要让小球

小球再重新回落到这个高度上的位置

我们先做移动实帧

一二

然后回来把帧

因为物质运动的时间

距离是越来越短

所以时间必然也会跟着减少

所以这时候

我们再给它打一个位置的关键帧

将小球移到这里左右

当然我们都需要在一条直线上

就按住Shift键就可以了

这时候我们就会发现小球打下来

它上去了

但是它上去又需要一个形变的过程

这时候我们就要

再给它加一个形变的关键帧

就是我们在这边小球

然后又马上就变那个值

然后就说这边变成110左右

110个少一点

然后慢慢变变变梭了

然后达到最顶端的时候

是它是能归零的时候

这个时候就要让它恢复成原本的形状

就是一个正圆

100

看 有没有发现小球弹在地上

然后又弹上去

这个时候

我们也可以给我们的缩放加一个09:05

让它更加生动一点

这个时候

我们可以将这一排关键帧

就是物体在空中

可能会有一个势能消耗的过程

这时我们可以给它向右移动一帧

一帧或者两帧

然后让它在空中有一个短暂的停留

我们选中这两个关键帧

按住Command加C

然后Command复制

这时候就会让它有一个

在空中短暂停留的效果

这时候又落到最高点了

我要让它再落回来

这个时候刚刚是8帧

然后现在应该是6帧

1 2 3 4

然后它落回到地面

给它打一个关键帧

然后将小球拉到地面

这个时候就可以看到砰啪

小球弹到地面了

然后它到地面呢

它又需要变成一个锥形的效果

我们可以按住J和K来

来进行一个左右的关键帧的锁定

就是我们可以定位到关键帧

上一个或者下一个关键帧

按住Command键向前移动一帧

让它变成一个锥形的效果

刚刚这个上面一个椎形是90×110

这个时候呢

可能就是我们要缩短一下

它的一个形变的程度

让它更加

那就让它这个92×108

应该在之前的一阵

然后按K键

然后再给它一个94 106

这时候我们就发现了

似乎形变还是不够

我们参考一下

我们之前做的前面的效果是多少

70 130 120 180

90 110 对的

这时候是85

这个地方似乎还给它重新再拉大了一点

扩张一点

85 110

115吧我们用

85 115的效果

然后砸到原地上

90 110

然后这时候

又砸回到原地面了

这个时候就

我们大致了解了这个规则和规律

之后我们就往返复式地

做这个小球上上落落的效果

然后把每一次运动间距都调小一点

再把那个时间间距也调少一点

92 108

然后上一个是6帧

现在变成4帧

1 2

那我们直接这样也1 2 3 4

然后再给它打一个位置的关键帧

然后把小球往上移

这个是之前运动到上一个的运动位置

我们让它再一半一半

往下挪到这里

差不多

然后这里该给它打一个关键帧

让它恢复到这里面

我们现在可以看到小圆由上往下落

在这里卡住了一下

给它调小一点

调整

让它停过一帧就行

那我们是不是这边都要往前挪一下

好了

现在是4帧

那我们再1 2

1 2

我们再给它打一个位置的关键帧

让小球落回地面的原地

这个时候形变已经非常少了

但是我们还是要给它一个

形变效果吧

往前挪一帧

然后让它竖着变成94 106

就是通过这些细节的变化

才能够更加体现出一个动效的生动之处

打到地面

再给它一个缩放效果

然后变成96×104

这时候向后面移动一帧

然后让小球移动1帧

给它打一个位置的关键帧

让小球回到这个高度

因为它现在已经是非常非常低的高度了

我们就往它移动一点点

给它缩放

调成原大小

然后接下来再往后移动一帧

让它有个反反复复上下运动的感觉

这个时候已经形变

基本上是不存在的

好在这儿打一个关键帧

这里我们把这儿

然后再向右移动一帧

然后再把它往上调一点点

我们可以放大

那往上再走一点

这边忘记打关键帧

我们再往上走一点

走一半

我们再往后移动一点

给它打一个关键帧

往下移动回来

再给它往后一帧

再上去一点点

又忘记打关键帧了

真是不好意思

再打一个帧

然后回到原地

我们先来预览一下

看这个效果可不可以

好像在中途的时候卡断了一下

要不我们这一块就不要这个短暂的停留了

然后顺便让它们往前再挪一帧

现在问题是这样的

可能就是我们这一块调了它是一个

越来越快

然后下落到这里

这一块

我们需要再给它做一个就是由下往上

这就是我们整个动效嘛

然后让它这一块关键帧

对应的就是这两个关键帧

我们让它

它是一个

首先由地面上弹起

然后它是一个动能逐渐减弱

最终归零的一个过程

所以说来给它这一块速度变快

然后逐渐慢慢慢慢变成这样

我们再来看一下

是不是现在就舒服很多

曲线就是调节一个动效的关键因素

然后 然后这一块

这一块是这个

然后往下落

又是一个自由落体的过程

然后我们这一块的东西也给它调一个曲线

让它更加生动一点

这一块东西

这一块的曲线呢

主要就是有一个由0

越来越快越来越快越来越快

所以是这样一个东西

然后这一块又是弹起来

让它这样子

两个小山峰

后面的由于距离太短

我们可以先不做

我们现在阅览一下动效

现在是不是就生动很多

这个东西已经生动很多了

然后最终我们不是有一个

就是短暂停留之后

有嗖的一声消失了

这个时候我们就再给它往后

挪个五帧吧

1 2 3 4 5

然后这个时候我们需要讲的

刚刚原理就是有一个预备动作

就是我们小球嗖

虽然可以直接嗖下去

但是还是要给它往回拉一点点

先给它打一个位置的关键帧

然后先弄向后挪动一帧

然后让它往下回拉一点点

又没有给它打关键帧

不好意思

往上拉一点

就是我们起跑的时候

需要先往后退一点

这样才能够跑得更快和更远

然后它给它大概三帧左右

因为是让它一个非常快的

不见的效果

1 2 3 来打一个关键帧

然后把它拉出我们的屏幕

这样就完成了一个

整个小球从落下来到消失的一个动态

能消失这一块也需要有一个形变的过程

所以我们这一块给它打一个缩放的关键帧

然后按住K

然后它要做预备动作

那我们把这块可以在这里

可以这样吧

让它在哪一块比较合适呢

这一块吧

然后下一个关键帧在这里

它要变成一个非常非常尖锐的矩形

我们这里调成70

更快一点

那我们就调成60

这里调整140

这样就是一个非常尖锐的矩形

尖锐的椭圆形

再看一下

似乎还是不够尖锐

我们可以把这个预览条给它往回拉一点

预览条显示的部分

就是我们这个整个东西要循环的过程

还不够快

我们可以调一下时间间距

刚才说的是三帧

我们可以把它调整两帧左右

1 2

然后选出这两个关键帧

往后移

现在小球可能就非常快地出去了

但是这个形变还可以给它更加大一点

让这个小球更加带感一点

调成50吧

但这一块的时间间距数

还是稍微少了一点点

我们可以让它1 2 3 4 5 6

选择最后一个关键帧

然后把我们的这个进度条拉到这里了

我们可以看到

一个小球已经完成了整个运动的倾向

但是就是

没有给我们视觉上特别大的惊喜感

我们可以打开这个

底下这一个虚拟

虚拟就是运动轨迹的一个

运动残影的一个效果

再点一下

这边这个效果

我们再来看一下

现在是不是就是

效果就非常好了

因为我们给它增加了一个现实视觉中

假如一个运动物体特别快

我们就会对它产生

一个视觉残影的一个效果

这个小球也显得更加有弹动和生动一点

再看一下之前的小球

感觉好像还差了点什么

OK

那小球的动效我们就讲到这里

我们再简单讲一下

导出吧

导出我们就可以点一下文件

导出 添加到渲染队列

然后这里点弹跳的小球MOV

我们直接点渲染

这个声音太大了

有点受不了

然后它就渲染到我们桌面上了

到时候你们就直接把这个MV的文件

拖到PS里面

然后用PS里面选择导出

选择导出为WEB

WEB格式里面选择GIF就可以导致一个

周而复始的一个小球弹跳的效果

然后之前我们讲到的案例

就是一个弹跳的小球

然后消失不见

然后从上面落下来

这是一个非常基本的

一个小球运动的动向

然后假如我们到了更加高级的层次

我们就需要用动效要去做一些界面上的东西

这是一个案例

就是显示一个手机上面

一个界面的交互流程

点进去

23:18 的过程

这也是我们学习动效

动效在UI界面设计中的一个主要作用

就是用来向像我们的那些高层领导或者甲方

来表达我们设计的意思和产品的功能

然后这个也会在后面一些课程中逐渐推出来

然后作为讨论课课程

我就不再展开做解释和说明了

谢谢大家

然后关于这个设计

界面设计导论部分

东西就差不多结束了

然后接下来给大家推荐一些学习资源

然后动效设计主要可以通过参考一些

其他人怎么做动效

你可以去研究一下

就说一两秒一个GIF

你也可以仔细的去观察一下

这个动效是由哪些部分组成的

这些东西要资源都可以在

Behance UI中国 优波 Pinterest 甚至Dribbble上

Dribbble上有很多大神的作品

都非常好和有意思

然后UI中国

它是有一个叫做每周临摹的一个模块

然后大家可以

里面都有一个详细的解释和教程

大家都可以选择其中比较感兴趣的部分

进行临摹

然后每周临摹都可以

每周临摹一点点

然后自己日积月累

自己会成长得比较快一点

然后优波设计是

比较涵盖了大部分资源的一个网站

大家基本上对于UI这一块想找到的

基本上都能在这里找到

然后大概这次导论课就只讲这么多

谢谢大家