案例1 制作简单的加载进度条动态效果

01 打开After Effects，首先在面板区域单击鼠标右键，选择【新建合成】，在【合成设置】面板底部，将【背景颜色】设置为黑色。

02 首先要画出进度条的轮廓，选择上方工具栏中的【钢笔】工具。注意【描边选项】里选择【纯色】而【填充选项】里则选择【无】，如图所示。而旁边的【像素】可以调整为【50】（或更大，以此调节进度条的粗细）。

03 接下来就是画进度条，在背景上运用钢笔工具点一个点，再按【Shift】键，点另一头的点，进度条的轮廓就出来了，如图所示。

04 在左下角的合成面板里，选择【内容】→【形状1】→【描边1】，在【线段端点】的选项里选择【圆头端点】，进度条如图所示变成圆头。

05 接下来要做进度条前进的效果。首先还是跟第一步一样，再新建一个合成，然后将“合成1”的页面向下拉到“合成2”的页面两次（注意是两次！），如图所示。

06 单击图层最前方的【眼睛标志】将第二层设为不可见，接着选择“合成1”（一定要选中在“合成1”上）。

07 按快捷键【Ctrl+Shift+N】新建遮罩层，再按【Ctrl+T】画出选区，此时会出来个框，将框向左拉伸，拉到起始位置，如图所示。

08 单击第二层的【眼睛】按键将第二层“合成1”设置为可见，这一步需要做出进度条慢慢向前伸长的感觉。首先选到下面的“合成1”，按位置快捷键【P】，会出现【位置】属性，然后将图形位置向左拉，直到覆盖起点位置，如图所示（只要向左拉动横坐标的数字即可）。

09 在【位置】的【小闹钟按钮】处单击，选择关键帧，达到如下效果。

10 将时间滑块拖动到你想要截止的时间点，再运用拉横坐标的方法，将整个进度条拉回原处，能与起始位置的进度条重合即可，如图所示。

11 回到“合成1”的界面，复制“合成1”到“合成2”的面板中，并且将其放到最上层，如图所示。

12 将下面的两个“合成1”全部选中，然后单击鼠标右键，选择【预合成】，并单击【确定】按钮，形成如下状态。

13 单击“预合成1”层【TrkMat】下方的【下拉三角标志】，选择【亮度遮罩“形状图层1”】，如图所示。

14 为了做出进度条的轮廓，新建一个合成命名为“合成3”。然后在“合成3”面板空白处单击鼠标右键，选择【新建】→【纯色】→【确定】，得到如下效果。

15 回到“合成2”的大面板，将大面板“合成2”中的“形状图层1”复制到“合成3”大面板中。同样再将纯色设置为【亮度遮罩“形状图层1”】得到如下效果。

16 在“深灰色 纯色1”选中的情况下单击鼠标右键，选择【图层样式】→【描边】，选择白色（其他颜色也可以，看个人喜好）。

17 将左上方的“固态层文件夹”向下拖动到“合成3”大面板中。

18 将左上方做好的“合成2”拉到下方的“合成3”面板上，并且放到最上层，得到如下效果。至此，一个简易的进度条就做好了（可以按空格来预览一下效果），下面需要做百分比。

19 运用上方的【文字工具】在你想要得到数字百分比增长的地方打上数字【01】，然后在“合成3”大面板中单击鼠标右键新建【空对象】，如图所示。

20 单击【效果】→【表达式控制】→【滑块控制】。

21 将【时间指针】拖动到0，单击效果控制台中【滑块】前的【小闹钟标志】创建关键帧，再把【时间指针】拉到结束时间，将数字【0】改为【100】。

22 在文字“01图层”中单击【文本】→【源文本】→【Alt+左键】进入表达式，如图所示。

23 鼠标左键长按“源文本”后的【旋转图标】拖曳至上方【滑块】效果处，将文本与控制滑块相连接，如图所示。

24 单击【表达式】，在表达式最前方输入“Math.round()”。注意：括号需要用英文括号()，后括号需要涵盖所有，在表达式的最后。

25 至此，一个简单的进度条就做好了。