環形進度條是個挺特殊的動畫，在旋轉的基礎上還要選擇性地顯示部分區域。制作起來需要花點心思。

思路

　　環形進度條是個挺特殊的動畫，在旋轉的基礎上還要選擇性地顯示部分區域。似乎沒有很直接的實現方式。

　　參考之前做過的CSS3環形進度條，感覺可行。它的實現方式，核心思想是把圓環分割成左右兩個半圓。進度條的深綠色，事實上是背景色，不會動的。左右兩個淺綠色半圓遮住進度條，先右後左依次旋轉，露出下方的進度條。

　　至于圓怎麼變成環，在上方蓋一個小點的圓就行了。在AE中，還可以使用圖層遮罩，這個我們稍後會講。

　　其實AE的實現方式可以更好，能做出真正背景透明的環形進度條。但核心仍然是左右兩個半圓分别旋轉。原理請看下圖。

　　把圓分成左半圓（紅色）和右半圓（藍色），限定兩個半圓的顯示區域在各自半邊空間裡。底下再加一層靜止的右半圓（紫色）。詳細的原理，我們邊做邊看。

　　左半圓、右半圓、背景半圓

　　首先把靜止的素材準備好，也就是這3個半圓。

　　建立合成，随意選了個720p的尺寸

　　畫圓，尺寸設為400*400。

　　把圓的位置（不是形狀圖層的位置）設為0, 0，圓就準确定位在畫布的中央。

　　在同一個形狀圖層中再畫個矩形，寬高設為200*400，半個圓的大小。

　　矩形的位置設為-100,0，剛好能蓋住左半邊圓。沒錯，這個矩形就是用來裁剪半圓的。

　　點此處的添加，選擇複合路徑。

　　模式設置為相交。這個和PS和AI裡的路徑加減道理相同。

　　然後選中圓、矩形和複合路徑，command/ctrl G編組。這個組就是我們需要的半圓。

　　展開組，複制其中的矩形，粘貼到組外面來。

　　這個新矩形才是真正用來做遮罩的，可以理解為PS裡的矢量蒙版。AE本身也有遮罩功能，但是隻能應用在圖層上，圖層旋轉，遮罩也跟着旋轉。我們需要的效果是半圓旋轉，遮罩層靜止不動。半圓轉到矩形外面的部分不可見。所以我們要再用一次複合路徑。

　　添加——複合路徑，模式仍然選擇相交。這回是新矩形和組的相交。

　　可以試着把組旋轉一下，超出矩形的部分确實看不見了。

　　旋轉歸位，給組的旋轉屬性加個關鍵幀，因為後面會用到。一層層點進來找實在太麻煩，如果有關鍵幀存在，按快捷鍵u就直接打開了。

　　現在我們可以開心地把這個圖層命名為“左半圓”了。

　　command/ctrl D複制圖層，這個新圖層是右半圓。把組外面的矩形位置設為100, 0，剛好蓋住圓的右半邊。但是什麼也沒顯示出來，沒錯，因為我們隻是把蒙版移到了右邊，半圓的位置仍然在左邊。

好多圖層，是不是有點糊塗了？簡單來說，組裡的圓和矩形，用來産生一個靜止的半圓。我們後面需要旋轉的時候，轉的就是這個半圓。組外面的矩形，則是矢量蒙版。左半圓的矢量蒙版蓋住左邊，右半圓的矢量蒙版蓋住右邊，拼起來剛好能顯示完整的圓。

　　把右半圓再複制一個，改名為背景半圓，移到底層。把組内的矩形位置設為100, 0，圓完整了。

　　至此，動畫所需的靜止素材都準備好了。

　　制作旋轉動畫

　　現在要讓半圓動起來。

　　多按幾次快捷鍵u，之前展開的各種屬性都收起來了，隻剩有關鍵幀的旋轉屬性。注意，這并不是圖層的旋轉屬性，而是每個圖層内那個組（靜止半圓）的旋轉屬性。

　　右半圓和背景半圓的旋轉屬性的關鍵幀可以去掉了。不過右半圓的旋轉屬性我們還會用到，先不要折疊起來，不然找起來很麻煩。

　　點擊左半圓圖層的這個小圓點，隻顯示當前圖層。相當于PS裡按alt點圖層眼睛。

　　做一個最普通的旋轉動畫吧，旋轉一周。

　　這步很重要。按alt點右半圓的旋轉屬性，下面多出一行，時間軸裡出現了表達式。

　　接下來，把右半圓旋轉屬性的這個螺旋狀圖标，拖到左半圓的旋轉屬性上。表達式随之變化。（這裡扯一句題外話，拖拽過程中可以試着在中途某個空白處松手，會看到一個很有愛的動畫效果）

　　剛才我們做了什麼呢？按alt點旋轉屬性，激活了它的表達式。把小螺旋拖動到左半圓的旋轉屬性上，會讓右半圓的旋轉屬性始終同步，數值與左半圓保持一緻。所以從現在起，任何時候我們旋轉左半圓，右半圓都會跟着轉。

　　現在我們可以關閉左半圓的單獨顯示。

　　為了能清晰地區分3個半圓，我們來填上不同的顔色。當然，填色沒有實際用途，隻是教學目的。

　　就按照思路裡的示意圖，左半圓填紅色，右半圓藍色，背景半圓紫色。

　　找到臨界幀

　　可以試着播放一下看，現在的動畫顯然是不對的。左半圓怎麼能一上來就顯示？應該要在右半圓轉完半圈之後才顯示。背景半圓也是。

　　所以，我們要找到特定的一幀。在這幀之前，左半圓和背景半圓都必須是隐藏狀态。

　　這個臨界幀，就是右半圓剛剛轉到180度或超出一點點的時候。

　　選中左半圓和背景半圓，把時間軸左端縮到臨界幀的位置。現在它們不會在不該出現的時候現身了。

　　再播放一下，這回對了！

　　不過這麼機械的勻速旋轉絕對是拿不出手的。要讓旋轉的過程自然一點。點擊這個波形圖标，打開曲線編輯器。選中左半圓的旋轉屬性，編輯器中出現了一條直線。

　　選中直線，點擊這個兩端手柄的圖标。直線變成了曲線，出現了兩個手柄。

　　曲線編輯器這個功能很好理解。橫軸是時間，縱軸是值的變化。曲線的平緩處，值的變化慢。曲線的陡峭處，值的變化快。

　　比如我們這裡要做一個快速進入、再逐漸減速停止的動畫，就應該把曲線調成這樣。

　　這時候我們就需要重新找一遍臨界幀了。還是那條原則，右半圓剛剛轉到180度或超出一點點的時候。

　　添加遮罩

　　圓形進度條已經完成了，我們把它裁剪成環形。

　　選中所有圖層，右鍵預合成。

　　3個圖層變成了一個，這個有點像PS裡的智能對象，或者FLASH裡的影片剪輯。

　　command/ctrl shift N，創建遮罩。這裡的遮罩就是我開頭說的圖層遮罩，AE自帶的遮罩功能。

　　現在的遮罩是個矩形，蓋住了整個畫布。我們展開遮罩菜單，點遮罩路徑。

　　上下左右4個值設置成圖中數字，下面的鈎打上，重設為圓形。

　　這4個數字是算出來的，目的是為了讓遮罩變為圓形後，尺寸與位置剛好與圓形進度條重合。

　　然後我們勾上這個反向。圓不見了，因為遮罩現在變為隻顯示它外面的部分。

　　選中遮罩，command/ctrl T（各位相當熟悉的快捷鍵）

　　按住command/ctrl shift，以中心為原點縮放遮罩，把它稍稍縮小一點。圓環露出來了

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!