iOS-Swift 水波紋的實現
阿新 • • 發佈:2018-12-27
本人最近在研究iOS動畫,至於原理,我不在這裡說了。畢竟這裡的標題:水波紋的實現。
在這裡,筆者使用的是Swift,要學習水波紋的實現,首先要知道以下幾點知識:
1.正弦函式:y = Asin(wx +b) + c。相信大家都比較熟悉。
2.CAShapeLayer的簡單實用,相信看一下,就是知道其大概的用途了,形狀Layer層。和使用者顯示圖形的Layer,繼承於layer,好了,廢話不多說,直接上圖吧。
上面的知識點,我會以程式碼的方式,梳理上面的知識點,不過首先我還是上傳效果圖吧,有圖有真相,才是事實嘛。
1.效果圖:
下面開始上程式碼。
2.建立變數
上面的變數的,都有相關的註釋,我就不再做解釋了。//這裡的lazy:是懶載入 就是OC中重寫get,set方法 lazy var waveDisplaylink = CADisplayLink()//相比NSTimer下,這裡用CADisplayLink主要是精確點,其頻率:1/60 lazy var firstWaveLayer = CAShapeLayer() lazy var secondWaveLayer = CAShapeLayer() /// 基礎描述 正弦函式 /// y=Asin(ωx+φ)+ b /// A : wavaA /// w : 1/waveW /// φ : offsetφ /// b : b private var waveA: CGFloat = 0 private var waveW: CGFloat = 0 private var offsetX: CGFloat = 0 private var b : CGFloat = 0 //水紋的移動的速度 var waveSpeed : CGFloat = 0
3.資料的初始化
//MARK: - 資料的初始化 private func initData(){ waveSpeed = 0.05 waveA = 8 // 設定週期 :( 2* M_PI)/waveW = bounds.size.width 。因為涉及的是layer,所以只談bounds,不說frame waveW = 2 * CGFloat(M_PI) / bounds.size.width b = bounds.size.height / 2 }
4.UI的初始化
這裡建立兩個shapeLayer,因為這樣的話,可以才像水的波紋不是?,這裡還有個要說的是CADisplayLink,主要是他比NSTimer更精準,螢幕重新整理頻率(FPS)是60,,iOS裝置的重新整理頻率是固定的,正常情況下回再每次重新整理結束後都呼叫,也就是60次/s.所以選擇CADisplayLink。private func configUI(){ firstWaveLayer.fillColor = UIColor.init(colorLiteralRed: 69/255.0, green: 255/255.0, blue: 255/255.0, alpha: 0.5).cgColor secondWaveLayer.fillColor = UIColor.init(colorLiteralRed: 69/255.0, green: 255/255.0, blue: 255/255.0, alpha: 0.5).cgColor layer.addSublayer(firstWaveLayer) layer.addSublayer(secondWaveLayer) waveDisplaylink = CADisplayLink(target: self, selector: #selector(getCurrentWave)) waveDisplaylink.add(to: RunLoop.current, forMode: .commonModes) }
5.下面的關鍵部分,程式碼如下:
@objc private func getCurrentWave() {
offsetX += waveSpeed
setCurrentStatusWavePath()
}
//MARK: - 關鍵部分
private func setCurrentStatusWavePath() {
// 建立一個路徑
let firstPath = CGMutablePath()
var firstY = bounds.size.width/2
firstPath.move(to: CGPoint(x: 0, y: firstY))
for i in 0...Int(bounds.size.width) {
firstY = waveA * sin(waveW * CGFloat(i) + offsetX) + b
firstPath.addLine(to: CGPoint(x: CGFloat(i), y: firstY))
}
firstPath.addLine(to: CGPoint(x: bounds.size.width, y: bounds.size.height))
firstPath.addLine(to: CGPoint(x: 0, y: bounds.size.height))
firstPath.closeSubpath()
firstWaveLayer.path = firstPath
// 建立一個路徑
let secondPath = CGMutablePath()
var secondY = bounds.size.width/2
secondPath.move(to: CGPoint(x: 0, y: secondY))
for i in 0...Int(bounds.size.width) {
secondY = waveA * sin(waveW * CGFloat(i) + offsetX - bounds.size.width/2 ) + b
secondPath.addLine(to: CGPoint(x: CGFloat(i), y: secondY))
}
secondPath.addLine(to: CGPoint(x: bounds.size.width, y: bounds.size.height))
secondPath.addLine(to: CGPoint(x: 0, y: bounds.size.height))
secondPath.closeSubpath()
secondWaveLayer.path = secondPath
}
這裡建立都是通過for迴圈建立路徑,其路徑是通過正弦函式,記得不錯的話,是在初中的時候學的,哈哈。同時,建立好路徑後,要給layer,這樣的話,shapeLayer才能知道要繪製什麼樣的路徑和圖形。同時這兩個要有個角度的差值,這樣的話,才能產生相應的效果。