本人最近在研究iOS動畫，至于原理，我不在這里說了。畢竟這里的標題：水波紋的實現。
在這里，要學習水波紋的實現，首先要知道以下幾點知識：
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的初始化
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) } 這里創建兩個shapeLayer，因為這樣的話，可以才像水的波紋不是？，這里還有個要說的是CADisplayLink，主要是他比NSTimer更精準，屏幕刷新頻率(FPS)是60，，iOS設備的刷新頻率是固定的，正常情況下回再每次刷新結束后都調用，也就是60次/s.所以選擇CADisplayLink。
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才能知道要繪制什么樣的路徑和圖形。同時這兩個要有個角度的差值，這樣的話，才能產生相應的效果。
總結：
看到這里同學是不是感覺很簡單呀,好了，就說到這里，其下載的地址我這邊會稍后上傳的。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
