环形进度条是个挺特殊的动画，在旋转的基础上还要选择性地显示部分区域。制作起来需要花点心思。
思路
环形进度条是个挺特殊的动画，在旋转的基础上还要选择性地显示部分区域。似乎没有很直接的实现方式。
至于圆怎么变成环，在上方盖一个小点的圆就行了。在AE中，还可以使用图层遮罩，这个我们稍后会讲。
其实AE的实现方式可以更好，能做出真正背景透明的环形进度条。但核心仍然是左右两个半圆分别旋转。原理请看下图。
新建合成 启动AE软件，进入到操作界面中，按下CTRL+N，调出合成设置的面板。在设置面板中，把合成的名称，合成高度，合成宽度等等选项一 一设置好。再点确定。完成合成的设置。操作方法一 在界面菜单栏下面这一排是工具栏。
把圆分成左半圆（红色）和右半圆（蓝色），限定两个半圆的显示区域在各自半边空间里。底下再加一层静止的右半圆（紫色）。详细的原理，ae怎么画出正圆，我们边做边看。，
左半圆、右半圆、背景半圆
首先把静止的素材准备好，也就是这3个半圆。
建立合成，随意选了个720p的尺寸
画圆，尺寸设为400*400。
把圆的位置（不是形状图层的位置）设为0，0，圆就准确定位在画布的中央。
在同一个形状图层中再画个矩形，宽高设为200*400，半个圆的大小。
矩形的位置设为-100，0，刚好能盖住左半边圆。没错，这个矩形就是用来裁剪半圆的。
点此处的添加，选择复合路径。
模式设置为相交。这个和PS和AI里的路径加减道理相同。
然后选中圆、矩形和复合路径，command/ctrl + G编组。这个组就是我们需要的半圆。
展开组，复制其中的矩形，粘贴到组外面来。
这个新矩形才是真正用来做遮罩的，可以理解为PS里的矢量蒙版。AE本身也有遮罩功能，但是只能应用在图层上，图层旋转，遮罩也跟着旋转。我们需要的效果是半圆旋转，遮罩层静止不动。半圆转到矩形外面的部分不可见。所以我们要再用一次复合路径。
添加——复合路径，模式仍然选择相交。这回是新矩形和组的相交。
可以试着把组旋转一下，超出矩形的部分确实看不见了。
旋转归位，给组的旋转属性加个关键帧，因为后面会用到。一层层点进来找实在太麻烦，如果有关键帧存在，按快捷键u就直接打开了。
现在我们可以开心地把这个图层命名为“左半圆”了。
首先启动ae程序。然后点击工具栏中的编辑标签。在下拉菜单中选择常规命令。然后勾选在绘制形状是让锚点居中。确定之后再次绘制形状就会直接让锚点居中了。使用椭圆工具绘制一个正圆,发现锚点不在圆的中心位置。
好多图层，是不是有点糊涂了？简单来说，组里的圆和矩形，用来产生一个静止的半圆。我们后面需要旋转的时候，转的就是这个半圆。组外面的矩形，则是矢量蒙版。左半圆的矢量蒙版盖住左边，右半圆的矢量蒙版盖住右边，拼起来刚好能显示完整的圆。
把右半圆再复制一个，改名为背景半圆，移到底层。把组内的矩形位置设为100，0，圆完整了。
至此，动画所需的静止素材都准备好了。
制作旋转动画
现在要让半圆动起来。
点击左半圆图层的这个小圆点，只显示当前图层。相当于PS里按alt点图层眼睛。
做一个最普通的旋转动画吧，旋转一周。
这步很重要。按alt点右半圆的旋转属性，下面多出一行，时间轴里出现了表达式。
接下来，把右半圆旋转属性的这个螺旋状图标，拖到左半圆的旋转属性上。表达式随之变化。（这里扯一句题外话，拖拽过程中可以试着在中途某个空白处松手，会看到一个很有爱的动画效果）
刚才我们做了什么呢？按alt点旋转属性，激活了它的表达式。把小螺旋拖动到左半圆的旋转属性上，会让右半圆的旋转属性始终同步，数值与左半圆保持一致。所以从现在起，任何时候我们旋转左半圆，右半圆都会跟着转。
现在我们可以关闭左半圆的单独显示。
1、首先我们打开ae软件并新建一个合成。2、点击“快捷工具栏”中的选框工具，往下拉菜单中的“椭圆选框工具”。3、在画布中按住shift键绘制一个圆形，并将填充设置为无。4、然后点击描边选项，把描边设置为纯色。。
为了能清晰地区分3个半圆，我们来填上不同的颜色。当然，填色没有实际用途，只是教学目的。
就按照思路里的示意图，左半圆填红色，右半圆蓝色，背景半圆紫色。
找到临界帧
1、打开AE，新建一个合成和背景；2、在背景中画出同心圆图形；3、做一个让同心圆从左向右依次显示的动画，之后选中最左边的圆弧，创建遮罩；4、最后再给遮罩添加一个关键帧，接着把时间指示器调到第十帧的位置，把遮罩拉。
所以，我们要找到特定的一帧。在这帧之前，左半圆和背景半圆都必须是隐藏状态。
这个临界帧，就是右半圆刚刚转到180度或超出一点点的时候。
选中左半圆和背景半圆，把时间轴左端缩到临界帧的位置。现在它们不会在不该出现的时候现身了。
再播放一下，这回对了！
不过这么机械的匀速旋转绝对是拿不出手的。要让旋转的过程自然一点。点击这个波形图标，打开曲线编辑器。选中左半圆的旋转属性，编辑器中出现了一条直线。
选中直线，点击这个两端手柄的图标。直线变成了曲线，出现了两个手柄。
比如我们这里要做一个快速进入、再逐渐减速停止的动画，就应该把曲线调成这样。
这时候我们就需要重新找一遍临界帧了。还是那条原则，右半圆刚刚转到180度或超出一点点的时候。
添加遮罩
圆形进度条已经完成了，我们把它裁剪成环形。
选中所有图层，右键预合成。
3个图层变成了一个，这个有点像PS里的智能对象，或者FLASH里的影片剪辑。
command/ctrl + shift + N，创建遮罩。这里的遮罩就是我开头说的图层遮罩，AE自带的遮罩功能。
ae这样画圆：1、打开AE，Ctrl+N，新建一个合成。2、鼠标右键，长点形状工具。3、选举椭圆工具。4、按住shift，移动鼠标。5、点击选择工具，鼠标拖动圆上的关键点可以调整圆的大小。ae：Adobe After Effects是Adobe公司推出。
现在的遮罩是个矩形，盖住了整个画布。我们展开遮罩菜单，点遮罩路径。
上下左右4个值设置成图中数字，下面的钩打上，重设为圆形。
这4个数字是算出来的，目的是为了让遮罩变为圆形后，尺寸与位置刚好与圆形进度条重合。
然后我们勾上这个反向。圆不见了，因为遮罩现在变为只显示它外面的部分。
选中遮罩，command/ctrl + T（各位相当熟悉的快捷键）
按住command/ctrl + shift，以中心为原点缩放遮罩，把它稍稍缩小一点。圆环露出来了
![[日]伊达千代《色彩设计的原理》作品简介与读书感悟](http://img.tianshugan.com/tsg/files/202212/1604322107833999362.jpg)
![[美]劳伦斯·利维（LawrenceLevy）《孵化皮克斯》作品简介与读书感悟](http://img.tianshugan.com/tsg/pub/33.jpg)
