「教程乾貨」- 用這思路實現環形進度條...還真挺魔幻的

大概需要 1 分鐘閱讀

最近也不知怎麼的，環形進度條貌似越來越受歡迎了，我想 Apple Watch 的功勞絕對功不可沒~而且UI界還給這種環形進度條起了個黑話---「The Ring」（與托爾金並沒有關係）。

實現這種效果通常有2種思路：

一種是裁剪

動圖 ?? http://i.imgur.com/sfIzJwO.gif

另外一種是描邊，今天就給大家露一手

首先創建一個圓形，去掉填充，保留描邊。別忘了將描邊設置為「Center」。

然後點擊檢查器上的小齒輪進入描邊設置。這裡最重要的是「Dash」和「Gap」欄位。

這裡需要一點數學常識，如果你不記得小學數學老師的長相，沒關係，但你一定記得少年Pi。

對，李安是個好導演。現在我們將「Gap」設置為圓的直徑乘以Pi（200*3.1415926），你可以在檢查器里直接輸入運算過程。

現在切換到「Dash」欄位，隨意調整它的數值看看，進度動了吧？最後別忘了把「Ends」設置為圓角形式，再給它垂直翻轉下。

??點擊圖片動起來??

大功告成！簡單吧??

原文地址（需要梯子）：https://medium.com/sketch-app-sources/sketch-tip-how-to-make-a-round-progress-bar-24931ee8b1fd#.a3wxyo8o4

原作者（需要梯子）：Christian Krammer

譯者：Sketch 素材網 ?? 我們的微博

軟廣硬發：更多「Sketch中文教程」及「Sketch優質素材」，盡在 Sketch 素材網 ??????

推薦閱讀：