編者按：昨天那篇動效神器Pixate的文發出來后，不少同學表示Windows黨終于也有自己的動效神器了，趁熱打鐵，今天@Jaret_杰瑞特?給同學們帶來一枚初級教程，做一個簡單的圓形進度條動畫，搞起來！

一個簡單的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

?【動效神器Hype零基礎入門教程系列】

先聊一下這個軟件的強大功能，附上簡單教程！
《Sketch神助攻！無代碼做動效神器Hype3入門教程》

中國臺灣設計師叫你用Hype做原型過場！
《無代碼動效神器！教你用HYPE3做APP原型的基礎過場（附神器）》

美丫姐手把手教你用Hype做Path菜單動畫！
《比AE還方便！教你用HYPE無代碼制作PATH扇形菜單動畫》

作者：@Jaret_杰瑞特

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量99萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：