![After Effects 移动UI动效设计 案例精粹](https://wfqqreader-1252317822.image.myqcloud.com/cover/597/22691597/b_22691597.jpg)
案例2 制作一个具有电极效果的进度条
01 打开After Effects,首先在面板区域单击鼠标右键,选择【新建合成】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0040_0001.jpg?sign=1738963858-mSTNFN6rcVZQ1IsJx34JRwAp6fGZW4L5-0-0aad36b0ab83744f8c360b5c626a5cb9)
02 在“合成1”上画一条线,选择After Effects面板上方菜单栏中的【钢笔工具】,【填充】选择【无】,【描边】选择【固态色】,【像素】设定为【90】像素。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0040_0002.jpg?sign=1738963858-Ny7ZTCeo9tvIScHwVvxKOx4D5jrqUfbL-0-0a667a8b4d92541827b7a70f2a86bdc9)
03 长按住【Shift】键在面板上拉出一条直线。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0040_0003.jpg?sign=1738963858-kYMNbjQ3TfdilgF4qBZKHBXFKVqEVvqT-0-5d42174fc27a361144c4f27be0773713)
04 此时合成面板中会自动形成一个“形状图层”,单击选中这一图层,选择【内容】→【形状1】→【描边1】,在【线段端点】的选项里选择【圆头端点】,此时进度条将变成圆头。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0040_0004.jpg?sign=1738963858-7GqM56mgzQrTflRZVtBCinxOIEXTEN1O-0-4ccf6e6f75cad3e9ecbad53a4f30b0b9)
05 再回到项目面板,单击右键新建“合成2”。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0041_0001.jpg?sign=1738963858-0qZvVIcN3wFC0j2G5ItIcWmYk23B9S0I-0-a73e86974fdd16a3c331b9513a184eea)
06 双击打开“合成2”,从项目面板中把“合成1”拖动复制到“合成2”中两次,如图所示。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0041_0002.jpg?sign=1738963858-dAQFbZTDUyw0yToA3eLWExkowoIm0J4z-0-e3f4422f9c84b053325900a0787c1c18)
07 单击第二层“合成1”中前面的【眼睛】标志,关闭“合成1”的可视性。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0041_0003.jpg?sign=1738963858-qX1nuErGbwmVCkEJ05gnJSYiT7yKCPK9-0-d172055779412069bc4c83ebb55ddf0d)
08 按快捷键【Ctrl+Shift+N】新建遮罩层,再按【Ctrl+T】画出选区,此时会出来一个框,将框向左拉伸,拉到起始位置,如图所示。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0042_0001.jpg?sign=1738963858-B8bheIPk1WcU8eIuih57SPXba4nrqV5L-0-cb98fa3bbde3d4a7000110685a58467d)
09 单击第二层“合成1”的【眼睛】标志,并选中第二层。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0042_0002.jpg?sign=1738963858-bgcOr9xVykXPicCAIquDknBagOq2AtUB-0-9df0b238f7f90529ea95bf499d8f87b0)
10 按【P】快捷键打开第二层“合成1”的位置属性。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0042_0003.jpg?sign=1738963858-U7bO2cVgc6992vEUNFrqrGNZgx4S3JGH-0-798cfe090e48c6c6ba0082c4c547324f)
11 把【时间指针】调节至零秒零帧处,然后调节图层二的位置,将其调节至与图层一重合,如图所示。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0043_0001.jpg?sign=1738963858-eDUGwQKp0WitgjhlJAKlZ9b7TUENl7p6-0-1238e3c536f51ad8b042e650d3027d3b)
12 将【时间指针】调节至在第4秒的地方,单击第二层“合成1”位置属性前的【小码表】标志设置关键帧,并将位置调节至起始位置。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0043_0002.jpg?sign=1738963858-Fk0CdyqTcKmiGBr1DGAq2ike6I3Rdxf4-0-be9002c405e4bc1aed383ce4ccdef7a1)
13 打开“合成1”将“合成1”中的“形状图层”按【Ctrl+C】复制,回到“合成2”,再按【Ctrl+V】粘贴到“合成2”中。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0044_0001.jpg?sign=1738963858-zyJ0vKPPYQhkxuprN4ctBkMQnUQJk76y-0-b0b1d97bf47c65a8c3e829ef3e679328)
14 将下面的两个“合成1”全部选中,然后单击鼠标右键,选择【预合成】,并单击【确定】按钮,形成如下状态。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0044_0002.jpg?sign=1738963858-O9OJJQbVN2xYtNfuuseJzkUmGmvVrsyQ-0-033cc998d4e33215f7f3f6e5aca3954b)
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0045_0001.jpg?sign=1738963858-oE4Dd7kfjB7lVno9somuP6hexorzrw7W-0-2a4bf87cdb4369cb71d4f9984027b272)
15 单击“预合成1”层【TrkMat】下方的【下拉三角标志】,选择【Alpha】,如图所示。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0045_0002.jpg?sign=1738963858-xpMY1GMDrbxB3WRvQe6V9Vp177Wg9jIk-0-ff420d15219ad901771f77443b7b3dc8)
16 新建“合成3”。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0045_0003.jpg?sign=1738963858-9YMHrVP0sI1pv5bObwKUvGPjwkib7Etx-0-fb120cb295dcf14ad7de3fdde6898706)
17 打开“合成3”,在合成面板中单击鼠标右键,选择【新建】→【纯色】新建一个纯色图层。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0046_0001.jpg?sign=1738963858-LPSOHu46lthaC5PMobDihw3QTqJYfza5-0-62d9ff0ef60812eac98c2a8629458d7b)
18 将“合成2”中的形状图层复制粘贴到“合成3”中,并调节至顶层。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0046_0002.jpg?sign=1738963858-iI8Q191j6lPJj4ocHiwy4hI6fgiKuOsZ-0-7d8a03b8eb17872622750f4900dbdcf0)
19 重复第15步,在【TrkMat】一栏中,将“纯色图层”改为【Alpha模式】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0046_0003.jpg?sign=1738963858-x0DpFqRoNS2yszOO7PBoANRZyM0jiznd-0-e339113f55eaa29b6647013997dd1973)
20 右键单击“纯色图层”,选择【图层样式】→【描边】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0047_0001.jpg?sign=1738963858-VW5OdWdDWCI9UxFxk77pxUn5nYemEmpL-0-de5ec1f115a2a42ca2d96bbaebf4af93)
21 单击【描边】项,在【颜色】选项后更改喜欢的颜色。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0047_0002.jpg?sign=1738963858-Q0EMXRY0TsCR1ZlDpCaLKTb2EridWUss-0-66bf0287b561a2865b75eb443d989113)
22 将项目窗口中的“固态层”拖动到“合成3”里。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0048_0001.jpg?sign=1738963858-VZUVDdS1W0rS4MmTTiMnHjOKX7mNMcIh-0-26ffc650669197ed3ebe4c39cc02603b)
23 将项目窗口中的“合成2”拖动到“合成3”里,并调节至图层最上方。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0048_0002.jpg?sign=1738963858-3u9liDNSyWN9gbgJvbJocvAgpOEa1HVj-0-511867b46622a2dc519848b953f8550f)
24 在【效果和预设】工具栏中,搜索【编号】,单击选中【编号】,并将【时间指针】调节至零秒零帧处,单击效果控件中【数值】前面的【小码表】标志设置关键帧,将【数值】调整为【0】,将【时间指针】调节至4秒处,将【数值】改为【100】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0049_0001.jpg?sign=1738963858-IHa5Wdv7HNaOuO18inPE5F7uaM20gDaE-0-075393670d7dfe0b9e0e27241c92de1c)
25 选择【文字工具】,写入“%”,并调节好两者位置。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0049_0002.jpg?sign=1738963858-2gl0meJIdQP1Gg1q7Z9GcGZ1cUrXvkON-0-6e3861b2002f22b35c112e9340a9791f)