这个进度条效果来自一位网友发布的求助贴。
这种小动效乍一看非常简单，但是要做出这种有节奏感并且视觉流畅的动效，还是非常考验基本功的。
可以看到文字变色和数字递增的节奏是由极快到极慢，又由极慢到较快的。我特意加大了了速度变化的幅度，让整个动效的节奏感非常强。
以下是我制作整个动效时的部分工程。
这个动效只使用了一次关键帧，数字的递增和位移都受到这个遮罩层的缩放属性的关键帧控制，因此整体的动画节奏跟随缩放的节奏。
下面开始正式制作。
制作变色动效
1.首先在合成中建立一个文字图层，调整好字体和大小之后，使用CTRL+ALT+HOME三键组合将文字层的锚点居中，再CTRL+HOME将文字层居中到合成，方便与后面的图层进行对齐。
2.在不选中任何图层的情况下，连续按两次Q启用圆角矩形工具，取消形状填充，描边选择灰白色或者其他颜色，绘制一个圆角边框，同时注意使用鼠标中键调整圆角大小。
并按照上面的方式将边框与文字对齐。
3.使用矩形工具绘制一个长度与边框相当的尖角矩形，作为遮罩，同样居中对齐。为了方便观察，我降低了透明度：
要让矩形遮罩从左到右缩放，那么要将变换:矩形1中的锚点移动到矩形最左边。
锚点需要移动的距离=矩形长度除以2，在数值前加-负号就可以让锚点移动到左边了。矩形需要复位的距离=矩形长度除以2。
PS：我这里链接了表达式是为了方便修改，不一定要这么做的。
4.调整好位置后，取消等比缩放，对缩放属性的X轴K一个从0到100的关键帧动画，时长自行把控，得到如下效果：
5.进入曲线编辑器，编辑动画曲线。
鼠标点击锚点可以显示曲线的调节手柄，选取工具模式下按住CTRL，鼠标点击可以增加锚点，调节到如下状态：
6.将遮罩的不透明度调节回100%，然后启用遮罩层的保留基础透明度功能，得到如下效果。
制作数字递增效果
1.直接新建一个文本图层，然后打开源文本属性，按住ALT单击秒表激活表达式输入框，再点击表达式关联器，链接到遮罩层的缩放属性的X轴上：
链接之后会得到一长串保留N位小数的数字：
2.这时候需要在表达式前增加Math.round进行取整，并在后面输入+“%”,就可以添加百分比符号了，得到效果如下：
制作数字跟随位移效果
1.新建一个空对象，作为数字的位移控制。
此时空对象应该在中间的位置，右键空对象的位置属性，在弹出的列表中勾选单独尺寸，将XY分离。
2.然后ALT点击秒表激活X轴的表达式输入框，再按住表达式关联器，将其连接到遮罩层的缩放属性的X轴上，让空对象跟随遮罩层缩放属性的变化节奏。
3.这时会发现空对象跑到合成左边的位置了，偏离了遮罩层所在的位置，不过完全没有关系，只需要将数字链接到空对象上作为它的子级，就达到了跟随的目的。
数字的初始位置不一定要空跟对象保持一致，只需要调整至上图所示位置即可，我们需要的只是一个节奏。
4.预览可以发现空对象移动的速度非常慢 ，导致数字远远跟不上进度条。所以需要增加空对象移动的速度。
解决方法就是在空对象的表达式上乘以一个数值，这个数值需要多次尝试才能得到合适的，以下数值供参考。
到此主要的动效制作完成了。
需要注意的是，如果你想直接在当前合成新增任意背景都是不允许的，必须要将当前合成下的图层全部进行预合成，或者使用当前合成新建一个合成，再添加背景。
为什么？你尝试下就知道了。
疑点解析
Q:能不能使用轨道遮罩，比如ALPHA 遮罩？
A:可以的。但是因为轨道遮罩只能遮罩一层，必须要将文字和边框预合成，并且再复制一层出来作为底色。哪种方式更高效，显而易见。
Q：为什么要使用缩放控制数字递增，而不是位移？
A：因为读条效果是从0-100%，而刚好缩放也是从0-100%。位移在此处并不合适，起始和结束的数值都不好控制。
Q:常见数字取整表达式有三种Math.round、Math.ceil、Math.floor，都能在这里使用么？
A:可以的！至于区别以后会写一篇文章做介绍。
Q:遮罩缩放动画是在变换：矩形1下K帧的，能不能在图层变换下K帧？
A：可以。
Q:保留基础透明度的原理是什么？
A:也许你需要看一下这篇文章
子蒙1999：AE|蒙版、遮罩、轨道遮罩全面解析zhuanlan.zhihu.com
最后回顾下本期分享的知识点：
1.保留基础透明度的使用；
2.数字取整表达式的使用；
3.使用单独尺寸将属性分离；
4.曲线编辑器调整动画节奏；
5.使用空对象控制其他对象的位置和旋转。
以上就是本期分享的全部内容了。如果你有想学习的效果，欢迎在下方评论或者通过后台留言，也可以通过我的个人微信【mlp1999】联系到我。
关注我公众号：动效自习室，可以获取更多C4D|AE干货。
扫一扫
287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
