WINDOWS設計師免費動效神器PIXATE初級教程

 　　一個簡單的Circle Progress動畫效果。點擊Download按鈕，開始進行下載及進度條顯示，並顯示文字“downloading”。在完成後文字消失。

　　1. 首先我們先整理下效果運行的大致思路：

　　在Pixate裡制作整個效果，我們需要通過兩個左右半圓在沿著一個圓形軌跡來進行中心順時針旋轉的更迭動畫。其中左半圓起始時被白色cover擋住，然後從0點開始往6點方向順時針旋轉慢慢全部顯示出來。而當左半圓完成180°旋轉後，右半圓則跟上繼續做6點到12點方向的順時針旋轉。同時，白色的cover將消失或移動到右半圓的下層。這樣就大致完整了一個360°的繞圈運動

　　2. 開始制作：

　　如上圖所示，是這個項目需要的一些基本資源素材：

　　( 資源素材的制作就不在闡述了，可以在AI、PS、Sketch或其他任何你會的軟件裡生成統一大小的PNG資源即可)

　　1. 需要一個透明镂空的背景軌跡(Transparent_circle_track);

　　2. 一個半圓的白色覆蓋層(Cover);

　　3. 一個左半圓的進度條(LeftPart);

　　4. 一個右半圓的進度條(RightPart);

　　5. 可選項：一個按鈕(Download btn)及一行運行狀態時的文字顯示(Downloading text)

　　將資源拖入畫布後按照下圖順序排列圖層：

　　(起始頁沒什麼好說的。圖層的排列還是很好理解的。點擊的按鈕頂層;透明镂空的背景軌跡一定在進度條和cover上;cover起始一定在兩條進度條上;而left在right上面的原因，是我在這個案列中，我給cover使用了reorder的指令。便於制作，我之後將cover就直接set到rightpart的下面或者是直接置於整個的層底)

　　將資源全部放置於畫布的中間，並將最後一層的“rightpart”的Opacity不透明度設置為0，使其完全透明不可見。

　　最後的效果應該是如下圖：

　　現在來設置每個層級的具體參數：

　　先設置第一個按鈕層：

　　因為是整個項目的起始觸發，所以先給按鈕層一個Tap交互屬性：

　　接著給它添加一個“fade”的動畫屬性，設置觸發按鈕後，其本身會消失：

　　接著選擇“leftpart”左半圓的那個圖層，賦予一個“旋轉”屬性。讓它在按下“下載按鈕”1秒後，在2秒內完成一個自身180°的旋轉

　　此時，再選擇“rightpart”右半圓的那個圖層，也賦予一個”旋轉”屬性。讓它在按下“下載按鈕”3秒後，在2秒內完成一個自身180°的旋轉，緊接著左半圓完成另一半的運動。(為什麼是3秒?因為做半圓完成自身的旋轉是2秒，再加上1秒的延時，所以左半圓完成全部的時間是3秒)

　　因為之前將右半圓設置了全透明，所以要再給它賦予一個“fade”屬性，讓它重見光明。當然這個時間差也是3秒。

　　這個時候還有個問題就是在6點到12點范圍內，白色的cover其實是遮住了右半圓的圖層，所以我們也要在整個時候將白色的cover放置到最底層。拖拽一個Reorder動畫屬性給cover層，並設置“放置底層”。同樣也是3秒的時間差。因為這個時候左半圓剛好完成了他自己的旋轉。

　　最後給“downloading”的文字增加一個“Fade”屬性讓它在整個流程跑完後就消失。

　　因為跑完整個流程是“左半圓”的2秒加上“右半圓”的2秒，再加上起始左半圓的1秒延時。所以整個過程是5秒

　　好了，至此全部的設置完成了。點擊一下download的按鈕就會看到圓形的進度條已經可以完美工作了!

　　各位還可以根據需要制作一個“reset”的按鈕，讓其跑完一圈後“重置”。這裡就不再深入了。

　　抱著“自己動手歡樂多的原則”這個案例就不提供源文件下載了。大家自己多動動手腦，一起進步吧：D