波浪進度指示器吧WaveLoadingIndicator

github源碼地址: https://github.com/liuzhiyi1992/WaveLoadingView

個人博客原文：http://zyden.vicp.cc/waveloadingindicator/
歡迎轉載，請注明出處，謝謝

之前在不知道哪里看見有Android的開發者分享一個像是注水玻璃球一樣的進度指示器，覺得挺有意思想去了解下實現方式，但是在github上卻找不到ios的類似的東西，還是決定自己找個時間嘗試嘗試實現。原因就是這樣，好了先上成品

哈哈還行吧，想玩玩的朋友也可以點appetize.io這里在線運行，進去直接start就可以了。

江湖規矩，控制進度只需控制progress屬性就ok了，然后目前demo里可以直接改變波幅和邊框寬度來體驗，以及正中央的進度提示開關，當然水流速度也可以隨心所欲，只是沒有開放出來，上面github地址有源碼有使用demo，swift的，想怎樣改就怎樣改。

使用方法：

1.只需要將WaveLoadingIndicator.swift拖進工程里(oc工程可以通過bridge來import)

2.demo中結合SDWebImage演示下載圖片進度指示過程(當然適用任何進度指示):

let waveLoadingIndicator: WaveLoadingIndicator = WaveLoadingIndicator(frame: CGRectZero)  

使用的時候我把WaveLoadingIndicator加到ImageView里面，并填充整個ImageView，自伸縮

self.displayImageView.addSubview(self.waveLoadingIndicator)  
self.waveLoadingIndicator.frame = self.displayImageView.bounds  
self.waveLoadingIndicator.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]  

使用SDWebImage加載網絡圖片，利用回調里的receivedSize和expectedSize計算已接受比例，對waveLoadingIndicator的progress屬性賦值，控制水波的填充度

self.displayImageView.sd_setImageWithURL(url, placeholderImage: nil, options: .CacheMemoryOnly, progress: {  
    [weak self](receivedSize, expectedSize) -> Void in

    guard let weakSelf = self else {
        return
    }

    weakSelf.waveLoadingIndicator.progress = Double(CGFloat(receivedSize)/CGFloat(expectedSize))
    }) {
        [weak self](image, error, _, _) -> Void in
        // 不要忘記在完成下載回調中，移除waveLoadingIndicator
        guard let weakSelf = self else {
            return
        }

        weakSelf.waveLoadingIndicator.removeFromSuperview()
}

oc的朋友不必理會里面的guard，不過必須注意防止Block導致的循環引用

swift的朋友平常習慣使用[unowned self]的也要注意了，這里必須使用[weak self]，雖然[unowned self]后Block里持有的是弱引用，破壞了循環引用，但如果該controller(self)回收了，unowned機制會導致self變成一個無指向的野指針，SDWebImage再一次回調的時候，crash！

同理，oc的朋友在這種情況下也應使用__weak而不是__unsafe_unretained

對了demo中用的是.CacheMemoryOnly只是為了演示方便，復制的話記得改掉

修改屬性，定制個人喜好

點進WaveLoadingIndicator.swift，我們可以按個人需求修改里面的屬性：


· cycle —— 循環次數，在控件寬度范圍內，該正弦函數圖形循環的次數，數值越大，控件范圍內看見的正弦函數圖形周期數越多，波長約短，波浪也越陡。
· term —— 正弦周期，在layoutSubviews中根據cycle重新計算，修改無效
· phasePosition —— 正弦函數相位，不可修改，否則圖形錯亂
· amplitude —— 波幅，數值越大，波浪幅度越大，波浪越陡，反之越平緩，可通過代碼調用waveAmplitude修改
· position —— 正弦曲線的X軸 相對于 控件Y坐標的位置，在-drawRect中通過progress計算，修改無效
· waveMoveSpan —— 波浪移動的單位跨度，數值越大波浪移動越快，數值過大會出現不連續動畫現象
· animationUnitTime —— 重畫單位時間，數值越小，重畫速度越快頻率越大
· heavyColor —— demo中較深的綠色部分
· lightColor —— demo中較淺的綠色部分
· clipCircleColor —— 玻璃球邊界顏色
· clipCircleLineWidth —— 玻璃球邊線寬度，可通過代碼調用borderWidth修改
· progressTextFontSize —— 中央進度提示百分比字號大小

有什么不足或者建議，希望大家在博客評論指出，同時希望大家支持我新建的留言板，謝謝！