带水波纹进度条简单实现

今天要给大家讲解的是关于水波纹的进度条的实现。

学习此文章需要了解一下知识点：

1.正弦或者余弦函数的一点点的了解

2.贝塞尔去曲线，不是很了解的可以阅读笔者的贝塞尔精讲

好了，废话不多说，直接上效果图：

下面笔者将以代码方式来梳理此效果的逻辑

1.画一个圆形，代码如下：

 func configUI(frame : CGRect){
        //圆
        let path = UIBezierPath(roundedRect: frame, cornerRadius: frame.size.width/2)
        inCirleLayer.strokeColor = UIColor.lightGray.cgColor
        inCirleLayer.fillColor = UIColor.clear.cgColor
        inCirleLayer.path = path.cgPath
        inCirleLayer.lineWidth = 2
        inCirleLayer.lineCap = kCALineCapRound
        self.layer.addSublayer(inCirleLayer)
        
        
        //设置水波纹
        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
        self.layer.addSublayer(firstWaveLayer)
        self.layer.addSublayer(secondWaveLayer)
        waveDisplaylink = CADisplayLink(target: self, selector: #selector(getCurrentWave))
        waveDisplaylink.add(to: RunLoop.current, forMode: .commonModes)
    }

解释一下，上面是画一个圆心。下面的第对水波纹的做基础的一些设置，同时也设置定时器。代码比较简单

2.基本的参数设置

    //MARK: - 数据的初始化
    private func initData(){
        waveSpeedH = 0.2
        waveSpeed = 0.15
        waveA = 1.25
        // 设置周期 :( 2* M_PI)/waveW = bounds.size.width 。因为涉及的是layer，所以只谈bounds,不说frame
        waveW = 2 * CGFloat(M_PI) / (bounds.size.width / 3)
        b  = (rect?.size.height)!
    }

这里面笔者不去讲解一些Swift的属性等设置

3.重点来了

    func getCurrentWave(){
        if (b >= (rect?.size.height)!/4) {
            b = b - waveSpeedH
        }
        offsetX += waveSpeed
        setCurrentStatusWavePath()
    }
    //MARK: - 关键部分
    private func setCurrentStatusWavePath() {
        // 创建一个路径
        let firstPath = CGMutablePath()
        var firstY = bounds.size.width/2
        firstPath.move(to: CGPoint(x: 0, y: b))
        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: b))
        
        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
    }

笔者不在一一讲解上面的代码，只是讲解一下主要的思路，设置好高度，画一条正弦或者余弦函数，然后就是再设置其高度，这样一来，一条静态的正弦或者余弦函数的水波纹就出来了，然后带动态的设置高度，这样一来就出来了。

总结：

是不是很简单啊，感觉简单的话，可以给笔者点个赞

Demo下载链接：https://github.com/WSmalan/ProgressCirle