iOS-Swift 水波紋的實現

本人最近在研究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的初始化

   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才能知道要繪製什麼樣的路徑和圖形。同時這兩個要有個角度的差值，這樣的話，才能產生相應的效果。

總結：

看到這裏同學是不是感覺很簡單呀,好了，就說到這裏。如有相關需求的同學，可以聯繫我，

qq: 3145419760

微信號：WsMl0612

郵箱：[email protected]

下載連接:https://github.com/WSmalan/iOS-Swift-waterWave