github源碼地址: https://github.com/liuzhiyi1992/WaveLoadingView
我博客原文：http://zyden.vicp.cc/waveloadingindicator/
歡迎轉(zhuǎn)載，請(qǐng)注明出處，謝謝
之前在不知道哪里看見(jiàn)有Android的開(kāi)發(fā)者分享一個(gè)像是注水玻璃球一樣的進(jìn)度指示器，覺(jué)得挺有意思想去了解下實(shí)現(xiàn)方式，但是在github上卻找不到ios的類似的東西，還是決定自己找個(gè)時(shí)間嘗試嘗試實(shí)現(xiàn)。原因就是這樣，好了先上成品
哈哈還行吧，想玩玩的朋友也可以點(diǎn)appetize.io這里在線運(yùn)行，進(jìn)去直接start就可以了。
江湖規(guī)矩，控制進(jìn)度只需控制progress屬性就ok了，然后目前demo里可以直接改變波幅和邊框?qū)挾葋?lái)體驗(yàn)，以及正中央的進(jìn)度提示開(kāi)關(guān)，當(dāng)然水流速度也可以隨心所欲，只是沒(méi)有開(kāi)放出來(lái)，上面github地址有源碼有使用demo，swift的，想怎樣改就怎樣改。
使用方法：
1.只需要將WaveLoadingIndicator.swift拖進(jìn)工程里(oc工程可以通過(guò)bridge來(lái)import)
2.demo中結(jié)合SDWebImage演示下載圖片進(jìn)度指示過(guò)程(當(dāng)然適用任何進(jìn)度指示):
let waveLoadingIndicator: WaveLoadingIndicator = WaveLoadingIndicator(frame: CGRectZero)
使用的時(shí)候我把WaveLoadingIndicator加到ImageView里面，并填充整個(gè)ImageView，自伸縮
self.displayImageView.addSubview(self.waveLoadingIndicator)
self.waveLoadingIndicator.frame = self.displayImageView.bounds
self.waveLoadingIndicator.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
使用SDWebImage加載網(wǎng)絡(luò)圖片，利用回調(diào)里的receivedSize和expectedSize計(jì)算已接受比例，對(duì)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的朋友不必理會(huì)里面的guard，不過(guò)必須注意防止Block導(dǎo)致的循環(huán)引用
swift的朋友平常習(xí)慣使用
[unowned self]的也要注意了，這里必須使用[weak self]，雖然[unowned self]后Block里持有的是弱引用，破壞了循環(huán)引用，但如果該controller(self)回收了，unowned機(jī)制會(huì)導(dǎo)致self變成一個(gè)無(wú)指向的野指針，SDWebImage再一次回調(diào)的時(shí)候，crash！
同理，oc的朋友在這種情況下也應(yīng)使用
__weak而不是__unsafe_unretained
對(duì)了demo中用的是.CacheMemoryOnly只是為了演示方便，復(fù)制的話記得改掉
修改屬性，定制個(gè)人喜好
點(diǎn)進(jìn)WaveLoadingIndicator.swift，我們可以按個(gè)人需求修改里面的屬性：
· cycle —— 循環(huán)次數(shù)，在控件寬度范圍內(nèi)，該正弦函數(shù)圖形循環(huán)的次數(shù)，數(shù)值越大，控件范圍內(nèi)看見(jiàn)的正弦函數(shù)圖形周期數(shù)越多，波長(zhǎng)約短，波浪也越陡。
· term —— 正弦周期，在layoutSubviews中根據(jù)cycle重新計(jì)算，==修改無(wú)效==
· phasePosition —— 正弦函數(shù)相位，==不可修改==，否則圖形錯(cuò)亂
· amplitude —— 波幅，數(shù)值越大，波浪幅度越大，波浪越陡，反之越平緩，可通過(guò)代碼調(diào)用waveAmplitude修改
· position —— 正弦曲線的X軸 相對(duì)于 控件Y坐標(biāo)的位置，在-drawRect中通過(guò)progress計(jì)算，==修改無(wú)效==
· waveMoveSpan —— 波浪移動(dòng)的單位跨度，數(shù)值越大波浪移動(dòng)越快，數(shù)值過(guò)大會(huì)出現(xiàn)不連續(xù)動(dòng)畫現(xiàn)象
· animationUnitTime —— 重畫單位時(shí)間，數(shù)值越小，重畫速度越快頻率越大
· heavyColor —— demo中較深的綠色部分
· lightColor —— demo中較淺的綠色部分
· clipCircleColor —— 玻璃球邊界顏色
· clipCircleLineWidth —— 玻璃球邊線寬度，可通過(guò)代碼調(diào)用borderWidth修改
· progressTextFontSize —— 中央進(jìn)度提示百分比字號(hào)大小
