可樂橙過去這一年才開始接觸AE，確實是很有意思且實用的一門技能。AE入門挺簡單，如果學過Flash，上手會更快。其實任何復雜的UI動畫，都是通過最基本的位移、旋轉、縮放、透明度顏色變化的組合來實現。網上這些基本技巧的學習資料非常豐富，比如我就是靠這個系列視頻入門的。

　　不過，今天要分享給大家的這個環形進度條，制作起來需要花點心思。

　　思路

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

　　參考之前做過的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度或超出一點點的時候。

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

　　再播放一下，這回對了!

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

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

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

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

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

　　添加遮罩

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

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

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

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

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

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

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