https://victor42.eth.limo/tags/ae/Recent content in AE on Victor42Hugo -- gohugo.ioenhi@victor42.work (Victor42)hi@victor42.work (Victor42)Tue, 10 Feb 2015 15:16:00 +0000https://victor42.eth.limo/post/3424/Tue, 10 Feb 2015 15:16:00 +0000hi@victor42.work (Victor42)https://victor42.eth.limo/post/3424/<p>【补充：本效果证实有更简便的实现方法，详情请直接看末尾。不过本文的解法中用到的一些技巧还是很实用的，可以作为一种练习。】</p> <p>我过去这一年才开始接触AE，确实是很有意思且实用的一门技能。AE入门挺简单，如果学过FLASH，上手会更快。其实任何复杂的UI动画，都是通过最基本的位移、旋转、缩放、透明度、颜色变化的组合来实现。网上这些基本技巧的学习资料非常丰富，比如我就是靠这个<a class="link" href="http://v.youku.com/v_show/id_XMjMyNzk0NjQ4.html?f=5405564" target="_blank" rel="noopener" >系列视频</a>入门的。</p> <p>不过，今天要分享给大家的这个环形进度条，制作起来需要花点心思。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/1.gif" loading="lazy" alt="AE制作出的最终环形进度条动画效果动图" ></p> <h2 id="思路">思路 </h2><p>环形进度条是个挺特殊的动画，在旋转的基础上还要选择性地显示部分区域。似乎没有很直接的实现方式。</p> <p>参考之前做过的<a class="link" href="http://greenzorro.github.io/demo/css/%E7%8E%AF%E5%BD%A2%E8%BF%9B%E5%BA%A6%E6%9D%A1.html" target="_blank" rel="noopener" >CSS3环形进度条</a>，感觉可行。它的实现方式，核心思想是把圆环分割成左右两个半圆。进度条的深绿色，事实上是背景色，不会动的。左右两个浅绿色半圆遮住进度条，先右后左依次旋转，露出下方的进度条。</p> <p>至于圆怎么变成环，在上方盖一个小点的圆就行了。在AE中，还可以使用图层遮罩，这个我们稍后会讲。</p> <p>其实AE的实现方式可以更好，能做出真正背景透明的环形进度条。但核心仍然是左右两个半圆分别旋转。原理请看下图。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/2.gif" loading="lazy" alt="AE环形进度条实现原理的红蓝紫三色半圆旋转演示动图" ></p> <p>把圆分成左半圆（红色）和右半圆（蓝色），限定两个半圆的显示区域在各自半边空间里。底下再加一层静止的右半圆（紫色）。详细的原理，我们边做边看。</p> <h2 id="左半圆右半圆背景半圆">左半圆、右半圆、背景半圆 </h2><p>首先把静止的素材准备好，也就是这3个半圆。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/1.png" loading="lazy" alt="在AE中准备好的左、右及背景三个彩色半圆素材图层" ></p> <p>建立合成，随意选了个720p的尺寸。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/2.png" loading="lazy" alt="AE中新建合成的属性设置面板，宽度1280高度720" ></p> <p>画圆，尺寸设为400*400。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/3.png" loading="lazy" alt="AE形状图层中椭圆路径的大小属性设置为400x400" ></p> <p>把圆的位置（不是形状图层的位置）设为0, 0，圆就准确定位在画布的中央。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/4.png" loading="lazy" alt="AE中将椭圆路径的位置参数重置为0,0以进行居中" ></p> <p>在同一个形状图层中再画个矩形，宽高设为200*400，半个圆的大小。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/5.png" loading="lazy" alt="在同一形状图层下新建一个大小为200x400的矩形路径" ></p> <p>矩形的位置设为-100,0，刚好能盖住左半边圆。没错，这个矩形就是用来裁剪半圆的。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/6.png" loading="lazy" alt="设置矩形路径位置为-100,0以遮挡圆的左半部分" ></p> <p>点此处的添加，选择复合路径。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/7.png" loading="lazy" alt="AE形状图层添加菜单中选择复合路径Merge Paths选项" ></p> <p>模式设置为相交。这个和PS和AI里的路径加减道理相同。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/8.png" loading="lazy" alt="在复合路径属性中将合并模式设置为相交Intersect" ></p> <p>然后选中圆、矩形和复合路径，command/ctrl + G编组。这个组就是我们需要的半圆。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/9.png" loading="lazy" alt="将椭圆、矩形和复合路径归纳编组在同一个组中" ></p> <p>展开组，复制其中的矩形，粘贴到组外面来。</p> <p>这个新矩形才是真正用来做遮罩的，可以理解为PS里的矢量蒙版。AE本身也有遮罩功能，但是只能应用在图层上，图层旋转，遮罩也跟着旋转。我们需要的效果是半圆旋转，遮罩层静止不动。半圆转到矩形外面的部分不可见。所以我们要再用一次复合路径。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/10.png" loading="lazy" alt="在组外部添加新的矩形和复合路径以创建矢量蒙版" ></p> <p>添加——复合路径，模式仍然选择相交。这回是新矩形和组的相交。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/11.png" loading="lazy" alt="在AE画布中旋转组，超出外部矢量蒙版的部分被裁切隐藏" ></p> <p>可以试着把组旋转一下，超出矩形的部分确实看不见了。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/12.png" loading="lazy" alt="给组的旋转属性在0帧位置打上首个关键帧" ></p> <p>旋转归位，给组的旋转属性加个关键帧，因为后面会用到。一层层点进来找实在太麻烦，如果有关键帧存在，按快捷键u就直接打开了。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/13.png" loading="lazy" alt="在图层面板中将当前形状图层重命名为左半圆" ></p> <p>现在我们可以开心地把这个图层命名为“左半圆”了。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/14.png" loading="lazy" alt="设置右半圆图层中外部蒙版矩形的位置为100,0以裁切右半圆" ></p> <p>command/ctrl + D复制图层，这个新图层是右半圆。把组外面的矩形位置设为100, 0，刚好盖住圆的右半边。但是什么也没显示出来，没错，因为我们只是把蒙版移到了右边，半圆的位置仍然在左边。</p> <p>好多图层，是不是有点糊涂了？简单来说，组里的圆和矩形，用来产生一个静止的半圆。我们后面需要旋转的时候，转的就是这个半圆。组外面的矩形，则是矢量蒙版。左半圆的矢量蒙版盖住左边，右半圆的矢量蒙版盖住右边，拼起来刚好能显示完整的圆。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/15.png" loading="lazy" alt="AE时间轴中排列着左半圆、右半圆和背景半圆三个图层" ></p> <p>把右半圆再复制一个，改名为背景半圆，移到底层。把组内的矩形位置设为100, 0，圆完整了。</p> <p>至此，动画所需的静止素材都准备好了。</p> <h2 id="制作旋转动画">制作旋转动画 </h2><p>现在要让半圆动起来。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/16.png" loading="lazy" alt="AE时间轴按键u后，只显示具有关键帧的组旋转属性" ></p> <p>多按几次快捷键u，之前展开的各种属性都收起来了，只剩有关键帧的旋转属性。注意，这并不是图层的旋转属性，而是每个图层内那个组（静止半圆）的旋转属性。</p> <p>右半圆和背景半圆的旋转属性的关键帧可以去掉了。不过右半圆的旋转属性我们还会用到，先不要折叠起来，不然找起来很麻烦。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/17.png" loading="lazy" alt="在左半圆图层点击独奏Solo小圆点以单独显示该图层" ></p> <p>点击左半圆图层的这个小圆点，只显示当前图层。相当于PS里按alt点图层眼睛。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/18.png" loading="lazy" alt="为左半圆添加从0度到1x0.0度旋转一圈的关键帧动画" ></p> <p>做一个最普通的旋转动画吧，旋转一周。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/19.png" loading="lazy" alt="按Alt点击右半圆旋转属性的秒表激活其表达式编辑框" ></p> <p>这步很重要。按alt点右半圆的旋转属性，下面多出一行，时间轴里出现了表达式。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/20.png" loading="lazy" alt="使用AE父级螺旋关联器将右半圆的旋转表达式链接至左半圆" ></p> <p>接下来，把右半圆旋转属性的这个螺旋状图标，拖到左半圆的旋转属性上。表达式随之变化。（这里扯一句题外话，拖拽过程中可以试着在中途某个空白处松手，会看到一个很有爱的动画效果）</p> <p>刚才我们做了什么呢？按alt点旋转属性，激活了它的表达式。把小螺旋拖动到左半圆的旋转属性上，会让右半圆的旋转属性始终同步，数值与左半圆保持一致。所以从现在起，任何时候我们旋转左半圆，右半圆都会跟着转。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/21.png" loading="lazy" alt="在时间轴中关闭左半圆的独奏Solo状态以恢复完整图层显示" ></p> <p>现在我们可以关闭左半圆的单独显示。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/22.png" loading="lazy" alt="AE画布上分别填充为红、蓝、紫三色的半圆拼接效果" ></p> <p>为了能清晰地区分3个半圆，我们来填上不同的颜色。当然，填色没有实际用途，只是教学目的。</p> <p>就按照思路里的示意图，左半圆填红色，右半圆蓝色，背景半圆紫色。</p> <h2 id="找到临界帧">找到临界帧 </h2><p>可以试着播放一下看，现在的动画显然是不对的。左半圆怎么能一上来就显示？应该要在右半圆转完半圈之后才显示。背景半圆也是。</p> <p>所以，我们要找到特定的一帧。在这帧之前，左半圆和背景半圆都必须是隐藏状态。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/23.png" loading="lazy" alt="将时间轴指针定位在右半圆旋转至180度的临界帧处" ></p> <p>这个临界帧，就是右半圆刚刚转到180度或超出一点点的时候。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/24.png" loading="lazy" alt="截断左半圆和背景半圆图层的入点，使其在180度临界帧后才出现" ></p> <p>选中左半圆和背景半圆，把时间轴左端缩到临界帧的位置。现在它们不会在不该出现的时候现身了。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/25.png" loading="lazy" alt="在AE时间轴下方点击图表编辑器图标进入运动曲线调整" ></p> <p>再播放一下，这回对了！</p> <p>不过这么机械的匀速旋转绝对是拿不出手的。要让旋转的过程自然一点。点击这个波形图标，打开曲线编辑器。选中左半圆的旋转属性，编辑器中出现了一条直线。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/26.png" loading="lazy" alt="在曲线编辑器中将线性关键帧转为贝塞尔曲线关键帧" ></p> <p>选中直线，点击这个两端手柄的图标。直线变成了曲线，出现了两个手柄。</p> <p>曲线编辑器这个功能很好理解。横轴是时间，纵轴是值的变化。曲线的平缓处，值的变化慢。曲线的陡峭处，值的变化快。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/27.png" loading="lazy" alt="通过贝塞尔手柄将旋转速度曲线调整为前快后慢的缓动状态" ></p> <p>比如我们这里要做一个快速进入、再逐渐减速停止的动画，就应该把曲线调成这样。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/28.png" loading="lazy" alt="结合最新的缓动速度曲线，重新在时间轴上微调图层的入点" ></p> <p>这时候我们就需要重新找一遍临界帧了。还是那条原则，右半圆刚刚转到180度或超出一点点的时候。</p> <h2 id="添加遮罩">添加遮罩 </h2><p>圆形进度条已经完成了，我们把它裁剪成环形。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/29.png" loading="lazy" alt="选中所有形状图层并右键选择新建预合成Pre-compose选项" ></p> <p>选中所有图层，右键预合成。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/30.png" loading="lazy" alt="在预合成属性设置对话框中命名为预合成1并点击确定" ></p> <p>3个图层变成了一个，这个有点像PS里的智能对象，或者FLASH里的影片剪辑。</p> <p>command/ctrl + shift + N，创建遮罩。这里的遮罩就是我开头说的图层遮罩，AE自带的遮罩功能。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/31.png" loading="lazy" alt="为预合成图层添加一个覆盖整个合成画面的矩形遮罩" ></p> <p>现在的遮罩是个矩形，盖住了整个画布。我们展开遮罩菜单，点遮罩路径。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/32.png" loading="lazy" alt="在遮罩形状属性对话框中准备对边界值进行输入重设" ></p> <p>上下左右4个值设置成图中数字，下面的钩打上，重设为圆形。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/33.png" loading="lazy" alt="将遮罩边界的上下左右值设为算好的固定数值，并勾选重设为椭圆" ></p> <p>这4个数字是算出来的，目的是为了让遮罩变为圆形后，尺寸与位置刚好与圆形进度条重合。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/34.png" loading="lazy" alt="在遮罩属性中勾选反向Inverted，使遮罩范围外的圆形显示" ></p> <p>然后我们勾上这个反向。圆不见了，因为遮罩现在变为只显示它外面的部分。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/35.png" loading="lazy" alt="在画布中按住Ctrl&#43;Shift等比例中心缩小圆形遮罩，切出内部圆环" ></p> <p>选中遮罩，command/ctrl + T（各位相当熟悉的快捷键）</p> <p>按住command/ctrl + shift，以中心为原点缩放遮罩，把它稍稍缩小一点。圆环露出来了。</p> <p><img src="https://cdn.victor42.work/posts/2015-02/02-09/1.gif" loading="lazy" alt="AE制作出的最终环形进度条动画效果动图" ></p> <p>大功告成，这就是我要的<del>滑板鞋</del>进度条。</p> <h2 id="总结">总结 </h2><p>教程洋洋洒洒写了这么长一段，大多都在解释思路与原理。其实整个制作过程非常简单。多来几遍，以后再碰到这样的需求，基本5分钟拿下。</p> <p>当然，你也可以再偷懒一点。因为在文章末尾，我一定会把源文件放出来的。 →_→</p> <p><a class="link" href="http://pan.baidu.com/s/1eQxSE6A" target="_blank" rel="noopener" >传说中的源文件</a></p> <p>我最后要提醒一下，由于我也是半桶水，不能保证这就是最佳的实现方法，只是能实现而已。我猜测，或许在我还没有研究过的路径动画中，藏着更简便的解法。</p> <p>如果你有更好的方法，请不吝赐教。</p> <p>【补充：马上就有朋友回复了，更简便的方法还不止一种。“径向擦除”和“修剪路径”，我试了下径向擦除，真是一步到位。有兴趣的朋友可以看看<a class="link" href="http://www.zcool.com.cn/article/ZNDkzNDg=.html" target="_blank" rel="noopener" >这篇文章</a>中的圆形生长部分。】</p>