0.0°

AE教程：旋转的液体加载动效

经验类型教程
经验属性原创文章
经验版权署名-非商业性使用-相同方式共享

UILEO

关注

35842 164 791 2018-05-17

课前准备

源文件下载：点击下载

首先还是想说几个点

1、其实动效的应用都是相通的，而大部分的UI交互动效其实无非就是修改“大小”、“透明度”、“位置”等最基础的地方，所以不用担心学习这些在工作中用不上。

2、有些人说很简单的一些点还特意重复去说，其实也不是我想啰嗦这么多，毕竟写得多也不会给我稿费。。。总担心有人会看不懂，所以为了兼容更多0基础的小伙伴，就放大每个细节，争取让所有人都能看懂。

3、谢谢所有关注并支持本教程的小伙伴，由于每个教程制作的时间太过于长，所以在有些地方或许会有些不足，也欢迎大家提出意见

假如卡在一个地方可以进群或者私信我

一、确定所需要做的动效

1、简要介绍液体动效

2、制作第一个动效

3、制作第二个动效

4、导出动效

Image title

二、简要介绍液体动效

在AE动效中简单的加一些小效果就会变得非常有细节，而这一次要教的就是用一些比较简单的技法去做loading的动效

首先创建一个1000*800的合成，帧速率25帧每秒

Image title

将上侧的形状工具调整为圆形后“双击”操作

Image title

打开左下侧的形状图层下面的椭圆路径，首先将左侧的等比例的扣锁打开，然后调整大小为100*100的大小

Image title

继续在原地方点击椭圆1，Ctrl + D复制一层

Image title

打开这2层的位置，打上关键帧，在1s的时候改变位置

Image title

开始划重点啦！！

首先选择“效果 - 过时 - 快速模糊”

Image title

修改左上角的快速模糊中的模糊度为30

Image title

然后选择“效果 - 遮罩 - 简单阻塞工具”

Image title

修改左上角的简单阻塞工具中的阻塞为8（调整到模糊度消失为止）

Image title

这个就是液体动效的简单介绍了

Image title

三、开始制作第一个Loading动效

1、首先创建一个1000*800的合成，帧速率25帧每秒

Image title

2、将上侧的形状工具调整为圆形后“双击”操作

Image title

3、打开左下侧的形状图层下面的椭圆路径，首先将左侧的等比例的扣锁打开，然后调整大小为[100,100] 的大小，位置调整为[0.0，-100.0]

Image title

4、为了让圆球的品质感更好，在颜色上更改为渐变色
Image title

5、再次点击填充后面的颜色，修改其颜色为#00EAFF - #006CFF

Image title

6、修改完渐变色后在合成中会出现一条线，可拖动线去调整渐变的角度（假如合成未出现线的话，可选择“P”键，然后点击合成任意一处，然后删除掉图层，重复上述修改渐变的操作即可出现）

Image title

7、再次点击形状图层，依次打开到如下图的“旋转”

Image title

8、在最初始的位置点击旋转左侧的小时间按钮，然后在02s处将旋转修改为1X

Image title

9、在02S处点击“N”键，即可使动效的终点停留在02S处，这个时候点击“空格键”即可看到小圆绕着中心点转圈，接着选中2个点后按“F9”即可让其缓动。

Image title

10、接下来做另外4个球球，首先选中椭圆1，然后“CTRL+D”4次

Image title

11、现在已经有5个小圆球了，只是都是重叠的，所以我们现在要将其时间轴错开

首先选择形状图层1后，按下“U”键，即可打开正在运动的关键帧

Image title

12、接下来看右侧时间轴可以看到5个一样的时间，所以将其依次错开05f变成如下图那样（为了让其更好的移动点击下侧的放大按钮3次）

Image title

13、由于现在的时间轴已经超过最终点了，所以将时间轴移到最终点后按下“N”，接下来播放，一个循环loading已经完成了

Image title

14、接下来调整细节，将5个椭圆依次变小，打开每个椭圆下面的“椭圆路径”，即可看到“大小”
椭圆1：大小不变
椭圆2：47，47
椭圆3：44，44
椭圆4：41，41
椭圆5：38，38
将时间挪到中间即可看到如下图的样式

Image title

15、最后一步了，选中之前所说的“快速模糊”和“简单阻塞工具”调整为如下数值即可大功告成

Image title

四、开始制作第二个Loading动效

1、首先创建一个1000*800的合成，帧速率25帧每秒

Image title

2、将上侧的形状工具调整为圆形后“双击”操作，由于做第一个动效的时候调整过渐变，所以这里已经自动设置渐变了

Image title

3、将形状图层的大小调整成 [200，200]

Image title

4、选中椭圆1，CTRL+D复制2个椭圆后在初始位置打上关键帧后继续01s处调整3个椭圆的位置
椭圆1：[0.0，-150.0]
椭圆2：[150.0，150.0]
椭圆3：[-150.0,150.0]

Image title

5、在03s处还原3个点的位置为[0.0，0.0]，然后全选所有的点后按“F9”加入缓动，然后按下“N”设置为终点

Image title
6、开始制作旋转和缩放动效
在01s的时候设置
缩放为[50.0，50.0]
旋转不变，但是需要打上时间戳

在03s的时候设置
缩放为[100.0，100.0]
旋转为[1x，+0.0]

将旋转3个点选中按下“F9”设置缓动