狮子座的文子
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
水波纹加载动效，重点是水波动效和数字动效。
大家好！
最近在学习AE动效设计，感谢UI中国的小伙伴无私的分享。我也来分享一下水波动效的加载动效的制作过程。
添加的源文件，需要的小伙伴可以下载看一下。
1.首先分解一下动效的组成，主要有水波上涨和波动的效果、数字增加效果及气泡效果。
2.分解好过程之后下手是不是就容易多了呢，接下来我们开始着手制作吧。
这里我没有用AI去画图形，主要是因为水波形状是有颜色渐变的效果，如果用AI画了之后在AE里打开会失去颜色，变成灰度图形，所以就直接在AE里面画了，小伙伴如果画单色图形建议在AI里面画好。
3.啰嗦这么多终于要开始了呢。首先打开AE（这不是废话么），新建一个合成如下：
宽800px 、高600px,选择方形像素，帧速率30，持续时间5秒钟，这个建成后后面感觉时间什么的不够不满意都可以再修改的。
4.根据前面的分析，我们先画水波。新建一个形状图层：从工具栏选择矩形工具双击新建一个矩形。窗口会出现一个和合成一样大小的矩形。
调整一下大小、颜色，自己看着调就行。
5.接下来把矩形边调整为波浪形状。这和我们平时用的PS、AI有点区别，首先要把矩形转换成可编辑的对象才可以编辑。这里初学者可能会遇到问题。展开形状图形，选中矩形路径 — 右键：转换为贝塞尔曲线路径。OK啦，接下来就像用ps一样啦，调整你想要的波浪形状。
6.调整好之后波浪后,调整一下透明度，然后Ctrl+D复制一层，左右移动下位置，把波浪错开。
7.动画时间到了。
把时间轴移动到第一帧的位置，选中两个形状图层按快捷键P，然后点位置前面的秒表图标，时间轴第0帧的位置就会出现一个关键帧。
8.位移
把时间轴移动到1秒15帧的位置，然后向左移动图形位置，或者直接修改数值，修改数值或者移动图形之后时间轴上会自动标记关键帧。
9.位移
把时间轴移动到3秒的位置，分别复制每个图层的第一帧Ctrl+C然后Ctrl+V粘贴。图形移动到最初的位置，这个时候按空格键播放，已经可以看到一个水波移动的动画了。然后选中所有关键帧（图1），按F9添加缓动效果（图2），最后全选图层右键 — 预合成。水波效果就完成啦，是不是很简单呢？
10.接下来画外面的几个圆圈了。
和画矩形一样，这里就不贴图了，修改下为300x300大小的正圆，然后Ctrl+D复制两个正圆。分别修改复制出来的正圆大小为：340x340、400x400。
然后把外层的两个圆的填充设成无（如下图），同理点导航上的描边，给圆添加添加描边。
11.修改最里面的圆的填充色为渐变色。
调整渐变填充里面的起始点和结束点，把渐变色调成想要样纸。如下图：
12.图形画好，开始动画啦。锵锵锵~~~
把刚才的预合成拖入到图层里放在有填充色的上一次，在填充层上选择轨道遮罩 —Alpha遮罩“水波”层，也就是刚刚拖进去的图层。
然后神奇的事情就会发生啦
13.开始设置关键帧做动画了，还是要把时间轴移动到1秒的位置。选择水波层，按快捷键P，点击秒表图标建立关键帧，把水波向上移动到想要的高度，然后把时间轴移动0帧的位置，把水波向下移动到不见。按空格键就可以预览水波上来的效果啦。
14.为了让水波上去之后停留一段时间，这里我们把后面一帧复制，把时间轴移动到3秒的位置，粘贴关键帧。水波下去的效果就是把第1帧复制，时间轴再向后移动到4秒的位置粘贴。全选一下关键帧，添加缓动。水波加载这里就完成啦。
内容有点多呀，数字增加效果和气泡效果见下篇~
全部评论：11条
更多作品
发表评论