之前看到芒果tv的app 加載視頻時的loading動畫，感覺不錯。不過一直沒有時間去自己做一個，這兩天閑來無事，寫了一個，記錄下，也算是paintcode 的一個實踐吧！

一、準備工作

需要使用到的工具有 Cocoapods、Xcode、 PaintCode 。
假定你已經(jīng)把這些都弄好
1、創(chuàng)建好xcode 項目HNTVLoadingDemo，然后打開終端進入到項目目錄文件夾下。終端輸入：

pod init

然后輸入

vim Podfile

把你的Podfile 寫成這樣

platform :ios, '8.0'

use_frameworks!

target 'HNTVLoadingDemo' do
    
pod 'pop'

end

保存之后執(zhí)行

pod install

ok，項目創(chuàng)建完成

二、使用PaintCode 繪制

1、先畫個圓，like this

1.gif

2、讓這個圓的邊線動起來

2.gif

3、調(diào)整細節(jié)，讓進度條看起來更美

3.gif

到這，一個簡單的進度條就完成了。
圖中插入的水平和垂直輔助線快捷鍵：cmd +shift + H, cmd + shift + V。

4、分析進度條的變化，簡單的把它看成貪吃蛇，并不是只有蛇頭在走，蛇頭走了一半之后，蛇尾就開始跟著走了，然后他們之間的距離越來越小，最后又回到了一點

5、蛇頭的變化

4.gif

6、蛇尾變化，前半部分沒動，后半部分奮力趕上。

5.gif

到這里，loading 就基本完成了，現(xiàn)在可以將代碼導出到創(chuàng)建的項目里面了。

6.gif

三、編寫控件

1、創(chuàng)建自定義類

7.gif

2、增加動畫

8.gif

到這里，一個loadingview 就完成了，是不是很簡單呢？

四、一些需要算的地方

1、圓虛線的dash、gap。

簡單來說dash 就是這個個虛線一段的長度，gap 就是兩端實線之間的長度，這里都是以點為單位。所以我們在算這個圓的最大gap 的時候就是2πR，就是圓的周長了。

2、progress 控制dash

dash 達到圓周長的時候，就是滿了，滿了，滿了。
所以

L = 2πR
Dash = -2L * progress * progress + 2L * progress

為什么會這樣？這就是個典型的二次函數(shù)，自己體會！

3、蛇尾的追隨，利用的是旋轉(zhuǎn)

progress: 0- 0.5,這時不動
progress:0.5-1.0,這段時間，view 要旋轉(zhuǎn)360°

angle = (progress < 0.5 ? 0 : (progress - 0.5) * 2) * -360

好了，就這么多了！動畫細節(jié)可能與芒果tv 有些出入，不過就不糾結(jié)這些了。
[項目地址，戳——>>]https://github.com/pengxianhe/HNTVLoadingDemo
[Cocoa China 文章地址]http://www.cocoachina.com/ios/20160811/17336.html