![After Effects 移动UI动效设计 案例精粹](https://wfqqreader-1252317822.image.myqcloud.com/cover/597/22691597/b_22691597.jpg)
案例3 制作彩虹效果圆形装载动态效果
01 打开After Effects,在项目窗口单击右键,选择【导入】→【文件】导入PSD自制素材图层,导入种类为【合成-保持图层大小】,图层选项为【合并图层样式到素材】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0050_0001.jpg?sign=1738964657-yIaSG933VOAhGY8LOPzz2DEglCfoiIiH-0-6c69ee08e78ed388c0ccfa8732e84c06)
02 双击箭头所示区域,打开“PSD自制素材”图层。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0050_0002.jpg?sign=1738964657-KglyC0yel8rEsVfJx6tJgG2Gme96SlGj-0-e459a4e4f8f96dc787d3842669b066ab)
03 为了完成局部的动画效果,先双击箭头所示区域,打开“meter图层”。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0051_0001.jpg?sign=1738964657-QW65z4RC37Tr8Omx39zeafyaebmJniqk-0-59ee6074a586ac10827f97185b3969a3)
04 打开“meter”层后,选中“progress”层,然后在After Effects右侧【效果和预设】搜索栏里输入关键字【擦除】,下拉双击选择【径向擦除】,此时After Effects面板的左侧会出现径向擦除的效果控件。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0051_0002.jpg?sign=1738964657-1jCUud86uY4g9BMCttr4ZNj1HQTrp0aU-0-d3b19a62545f932624c86b0ca1014265)
05 After Effects左侧效果控件径向擦除参数【过渡完成】设置为【68】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0052_0001.jpg?sign=1738964657-fwqCdWXHYAWVotGeTG0qrajJ6LeDuPdW-0-14fe5e524e332d9f5915a12edbfab2f3)
06 回到“meter”层,鼠标右键单击After Effects面板左下方空白区域,选择【新建】→【纯色】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0052_0002.jpg?sign=1738964657-Ccq7ILD6FFAvgpdTqQnfoDLlvQPbuVIO-0-54fa8136428f4d4510f94b9815ff76fe)
07 将新建的纯色图层命名为“数字”,【宽度】设置为【400像素】,【高度】设置为【300像素】,然后单击【确定】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0053_0001.jpg?sign=1738964657-3s4lkUYRhwC4qp4F52jqzJnRrFBjTNPv-0-c4a4afdd4d03bcb0ddd8e725134eff49)
08 在After Effects面板的右侧【效果和预设】搜索栏里输入关键字【编号】,下拉双击选择【编号】, After Effects面板中间将出现编号的效果控件,【字体】设置为【STKaiti】,【方向】设置为【水平】,【对齐方式】设置为【右对齐】,然后单击【确定】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0053_0002.jpg?sign=1738964657-QFlObEssQnU3dozIYi4DBkyDX4D9PImE-0-d82edad0bf8d56f2d9423d6792da33e6)
09 将【时间针】调节到零秒零帧处,单击After Effects面板左侧编号的效果控件中【数值】参数前的【秒表标志】标记关键帧,并将参数调整为【0】,将【小数位数】调整为【0】。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0054_0001.jpg?sign=1738964657-IbufskY4f3c9ES0cWYQjx5ofp0K0RjEy-0-f24201da7fca583b550d4c48a214a52a)
10 将【时间针】调节至2秒处,将After Effects面板左侧编号的效果控件中【数值】参数调整为【100】,此处系统将自动生成关键帧。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0054_0002.jpg?sign=1738964657-IsOf8uR2D5kBQ2WCSvZlLDVn0yMKQlSA-0-15a4d4c636b4d1e70402d83f307f52e5)
11 回到“progress”层,按住【Alt】键,同时单击After Effects面板左侧【径向擦除】的效果控件【过渡完成】前的【小码表】为图层添加表达式。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0055_0001.jpg?sign=1738964657-Sy1aIWAYY2O7z0HlyvI8VwbrVXADNyfh-0-d76c977552e9282e57dc6696d4b32ebe)
12 鼠标单击选中“progress层”,拖曳至左下方空白区域,然后在“meter层”中,选中“数字层”,单击效果控件前的【锁头图标】将数值的效果控件锁定,如图所示。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0055_0002.jpg?sign=1738964657-oHARTUC0TGp1yE8XIIguZPKn4JCPlU9Q-0-f0a0c82ac47299bdfdfbfcbc4fac95cd)
13 长按“progress层”后的【螺旋标志】,将其拖曳至“数字层”的效果控件下的【数值】参数处,将“progress层”的过渡效果与“数字层”的编号效果做父子链接,如图所示。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0056_0001.jpg?sign=1738964657-lPL99xcT3S1hzLnwWklO9hJJg17uELaH-0-465fb66d027eec7bc9126e5e8a33b95b)
14 在“progress层”后的表达式前加上【100-】,如图所示。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0056_0002.jpg?sign=1738964657-9qTm6xlvE5Bj9qTJ6n7VO0aV8NIgOQeA-0-f803a2621042ddd6d60a4a1d21b0d547)
15 选择“meter层”下的“数字层”,然后在After Effects面板右侧【效果和预设】搜索栏里输入关键字【渐变】,下拉双击选择【梯度渐变】,在After Effects面板左侧出现梯度渐变的效果控件。
![](https://epubservercos.yuewen.com/A28FB4/11261877703072306/epubprivate/OEBPS/Images/figure_0057_0001.jpg?sign=1738964657-uOKmB7a1SkT5KPwSaszNHukNFxUrvSfZ-0-3138ea14e29dc1b2bcbc6ad15dc6cb8c)
16 选中“数字图层”,在After Effects面板左侧梯度渐变的效果控件单击【交换颜色】,将数字颜色调整为有金属质感的数字。