- After Effects 移动UI动效设计 案例精粹
- 汪兰川 刘春雷
- 1013字
- 2020-06-26 10:19:16
案例2 制作一个具有电极效果的进度条
01 打开After Effects,首先在面板区域单击鼠标右键,选择【新建合成】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0040_0001.jpg?sign=1739694131-tV7bT7H7GBCQfrm7UuSfhmdqMM11CAJp-0-6c42356b081ba7722ffec41a804ddd72)
02 在“合成1”上画一条线,选择After Effects面板上方菜单栏中的【钢笔工具】,【填充】选择【无】,【描边】选择【固态色】,【像素】设定为【90】像素。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0040_0002.jpg?sign=1739694131-Zi4XmX8FDqZiFSvG0nNJOUc377SO8k11-0-4d12dec4a0253213f5670d4033554deb)
03 长按住【Shift】键在面板上拉出一条直线。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0040_0003.jpg?sign=1739694131-Yx7vQvDrfHLdv5CQCEExhL2iyrxoX0Sy-0-75c002ea4b6015d79defa7d09d094a04)
04 此时合成面板中会自动形成一个“形状图层”,单击选中这一图层,选择【内容】→【形状1】→【描边1】,在【线段端点】的选项里选择【圆头端点】,此时进度条将变成圆头。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0040_0004.jpg?sign=1739694131-uzkIysLWtftvlfhZvqkAll0Etd8zk3Aq-0-46704b198aa68b7a372499a5b6107bd2)
05 再回到项目面板,单击右键新建“合成2”。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0041_0001.jpg?sign=1739694131-sp5KdsYNSgwVIG5dJBEMLDrGi5RAuE5R-0-30b25ccbddb35ba9db81f19e50034b47)
06 双击打开“合成2”,从项目面板中把“合成1”拖动复制到“合成2”中两次,如图所示。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0041_0002.jpg?sign=1739694131-6XzrQbRS6ULYAqgPssXOAbc7XI8cJJg7-0-fadc186645b8899211ed822c5b87221a)
07 单击第二层“合成1”中前面的【眼睛】标志,关闭“合成1”的可视性。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0041_0003.jpg?sign=1739694131-o3CytUJGlcFkqMQlihpsUXarMRK48Bh1-0-1b24d01d493a6703de2c4c0aef621698)
08 按快捷键【Ctrl+Shift+N】新建遮罩层,再按【Ctrl+T】画出选区,此时会出来一个框,将框向左拉伸,拉到起始位置,如图所示。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0042_0001.jpg?sign=1739694131-7cnNYzHMzL25EbaemehOOVAfNiISKrCK-0-1393f46002224a78021631fdc4c2c8f8)
09 单击第二层“合成1”的【眼睛】标志,并选中第二层。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0042_0002.jpg?sign=1739694131-Cck4PfxvIRAp2J7tsBMaGk75sr50DmrS-0-22d10f74b7845235e13bf238855e4c12)
10 按【P】快捷键打开第二层“合成1”的位置属性。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0042_0003.jpg?sign=1739694131-tGB1RXzvoBQnu4oZEk38VljNaRYf5Ezm-0-0d4f3658e64602a293da50c03312b00c)
11 把【时间指针】调节至零秒零帧处,然后调节图层二的位置,将其调节至与图层一重合,如图所示。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0043_0001.jpg?sign=1739694131-NapRqEeDnTLJsuEouVpb1EMyHYc1afv1-0-9144d2bf746688a3d765b8f29f3d5bb4)
12 将【时间指针】调节至在第4秒的地方,单击第二层“合成1”位置属性前的【小码表】标志设置关键帧,并将位置调节至起始位置。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0043_0002.jpg?sign=1739694131-lVfEXp630NTHH9X7Rtwa3gE1DvWSOj5n-0-cacd9bffbd8d2ab342cffe26ce3a295a)
13 打开“合成1”将“合成1”中的“形状图层”按【Ctrl+C】复制,回到“合成2”,再按【Ctrl+V】粘贴到“合成2”中。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0044_0001.jpg?sign=1739694131-glAP7mG6HHTlnaskKVcfHxYEIrUwqTAx-0-44eb13de47798c777d063ae0460f78ea)
14 将下面的两个“合成1”全部选中,然后单击鼠标右键,选择【预合成】,并单击【确定】按钮,形成如下状态。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0044_0002.jpg?sign=1739694131-PBzbU1PUB0p8ks7OVul8QrYpCnVtIfHk-0-36c56527e1d1d37ee614241324dfde63)
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0045_0001.jpg?sign=1739694131-iOJRCBzs7Wyr1D0s6aonS4QbFH6HpmJO-0-bc03109a151807d8fd92de171548f69b)
15 单击“预合成1”层【TrkMat】下方的【下拉三角标志】,选择【Alpha】,如图所示。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0045_0002.jpg?sign=1739694131-fOFmKlhsfxN8wk4Gh2T4EE7S6NuzKtk6-0-ebf6fda8bcb2a2e7128e3b1eb79252d0)
16 新建“合成3”。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0045_0003.jpg?sign=1739694131-dkglqt3DcRkQqZIsedffJv9OfYjhhjnV-0-c9da521324ee20e24a9ced9c4417eebc)
17 打开“合成3”,在合成面板中单击鼠标右键,选择【新建】→【纯色】新建一个纯色图层。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0046_0001.jpg?sign=1739694131-J1bpYIOPkUp1fUZy35XRFIf9l2rlPmIM-0-cd06764955d873b58582dd9fb458f717)
18 将“合成2”中的形状图层复制粘贴到“合成3”中,并调节至顶层。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0046_0002.jpg?sign=1739694131-mFlqlKulvkCWMPNKQPICc2OlXP4rk2Ya-0-77347dbc9b7722aa2cf98ab64071d909)
19 重复第15步,在【TrkMat】一栏中,将“纯色图层”改为【Alpha模式】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0046_0003.jpg?sign=1739694131-OXwlW93s6a2HBwoZ3CPf77UvumolAIKO-0-a4efdc710bd5a1e30139393c1cc69d60)
20 右键单击“纯色图层”,选择【图层样式】→【描边】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0047_0001.jpg?sign=1739694131-QQXVjZ92bgHVmMW1dbNCsO7KRhQMLzkM-0-f8f7028efe176bf2fd5f22d8daf25977)
21 单击【描边】项,在【颜色】选项后更改喜欢的颜色。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0047_0002.jpg?sign=1739694131-VvGPlTGTWtyyaRfaeoON1vQ8b1JRlahh-0-055fbd89bbce8c1286fc79dbf10694f7)
22 将项目窗口中的“固态层”拖动到“合成3”里。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0048_0001.jpg?sign=1739694131-fKtZlJtgnp5dYI49lCDGyVwQGtQVBHSX-0-f68fc356395a55e2858c769c5ba3e79e)
23 将项目窗口中的“合成2”拖动到“合成3”里,并调节至图层最上方。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0048_0002.jpg?sign=1739694131-pj6v6IpxMNSFTX2827HaeGFJzcA8FunW-0-b6cd8c47227e55dcfd565e2b9d39590b)
24 在【效果和预设】工具栏中,搜索【编号】,单击选中【编号】,并将【时间指针】调节至零秒零帧处,单击效果控件中【数值】前面的【小码表】标志设置关键帧,将【数值】调整为【0】,将【时间指针】调节至4秒处,将【数值】改为【100】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0049_0001.jpg?sign=1739694131-lICfnfoQQqMduEpXqwq7C3GpuIrOye8I-0-757c9d755f7aec61c15559dcab165bd2)
25 选择【文字工具】,写入“%”,并调节好两者位置。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0049_0002.jpg?sign=1739694131-J0QpJ2Q0WtgeaDBQfT47302NitcWpEBf-0-c0dd154ff0f89a5e5819fac6557708a5)