AE教程制作环形进度条(一)

86素材网:环形进度条是一种特殊的动画,在旋转的基础上还要选择性地显示部分区域。制作起来需要花点心思。在AE中,可以使用图层遮罩,做出真正背景透明的环形进度条。但核心仍然是左右两个半圆分别旋转。如下图:

AE教程制作环形进度条(一)-86资源网

把圆分成左半圆(红色)和右半圆(蓝色),限定两个半圆的显示区域在各自半边空间里。底下再加一层静止的右半圆(紫色)。

左半圆、右半圆、背景半圆

首先把静止的素材准备好,也就是这3个半圆。

AE教程制作环形进度条(一)-86资源网

建立合成,随意选了个720p的尺寸

AE教程制作环形进度条(一)-86资源网

画圆,尺寸设为400*400。

AE教程制作环形进度条(一)-86资源网

把圆的位置(不是形状图层的位置)设为0, 0,圆就准确定位在画布的中央。

AE教程制作环形进度条(一)-86资源网

在同一个形状图层中再画个矩形,宽高设为200*400,半个圆的大小。

AE教程制作环形进度条(一)-86资源网

矩形的位置设为-100,0,刚好能盖住左半边圆。没错,这个矩形就是用来裁剪半圆的。

AE教程制作环形进度条(一)-86资源网

点此处的添加,选择复合路径。

AE教程制作环形进度条(一)-86资源网

模式设置为相交。这个和PS和AI里的路径加减道理相同。

AE教程制作环形进度条(一)-86资源网

然后选中圆、矩形和复合路径,command/ctrl + G编组。这个组就是我们需要的半圆。

AE教程制作环形进度条(一)-86资源网

展开组,复制其中的矩形,粘贴到组外面来。

这个新矩形才是真正用来做遮罩的,可以理解为PS里的矢量蒙版。AE本身也有遮罩功能,但是只能应用在图层上,图层旋转,遮罩也跟着旋转。我们需要的效果是半圆旋转,遮罩层静止不动。半圆转到矩形外面的部分不可见。所以我们要再用一次复合路径。

AE教程制作环形进度条(一)-86资源网

添加——复合路径,模式仍然选择相交。这回是新矩形和组的相交。

AE教程制作环形进度条(一)-86资源网

可以试着把组旋转一下,超出矩形的部分确实看不见了。

AE教程制作环形进度条(一)-86资源网

旋转归位,给组的旋转属性加个关键帧,因为后面会用到。一层层点进来找实在太麻烦,如果有关键帧存在,按快捷键u就直接打开了。

AE教程制作环形进度条(一)-86资源网

现在我们可以开心地把这个图层命名为“左半圆”了。

AE教程制作环形进度条(一)-86资源网

把右半圆再复制一个,改名为背景半圆,移到底层。把组内的矩形位置设为100, 0,圆完整了。至此,动画所需的静止素材都准备好了。制作旋转动画现在要让半圆动起来。多按几次快捷键u,之前展开的各种属性都收起来了,只剩有关键帧的旋转属性。注意,这并不是图层的旋转属性,而是每个图层内那个组(静止半圆)的旋转属性。右半圆和背景半圆的旋转属性的关键帧可以去掉了。不过右半圆的旋转属性我们还会用到,先不要折叠起来,不然找起来很麻烦。

AE教程制作环形进度条(一)-86资源网

点击左半圆图层的这个小圆点,只显示当前图层。相当于PS里按alt点图层眼睛。

AE教程制作环形进度条(一)-86资源网

总结:由于教程比较长,敬请关注后续内容。

1. 86素材网软件资源源码都来源于网络采集和网络分享转贴(除注明原创外),请不要用于商业用途,如有侵权请邮件联系客服邮箱:2909993616@qq.com删除
2. 本站默认所有资源的解压码都是:www.86ziyuannet.com,如果遇到问题请联系客服
3. 86素材网提供的所有源码、软件、插件、资源等等其他资源,都不包含技术服务请大家谅解,部分资源可能失效,大家自己调试
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需,不支持退款
5.本站资源大多存储在云盘,如发现链接失效 【点击反馈】我们会第一时间更新

86资源网 » AE教程制作环形进度条(一)

86资源网,提供最优质的资源集合

立即查看 了解详情