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

我博客原文：http://zyden.vicp.cc/waveloadingindicator/
歡迎轉(zhuǎn)載，請注明出處，謝謝

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

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

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

使用方法：

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

2.demo中結(jié)合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加載網(wǎng)絡圖片，利用回調(diào)里的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
        // 不要忘記在完成下載回調(diào)中，移除waveLoadingIndicator
        guard let weakSelf = self else {
            return
        }
        
        weakSelf.waveLoadingIndicator.removeFromSuperview()
}

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

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

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

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

修改屬性，定制個人喜好

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


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

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