水波纹 波浪效果

水波纹效果图
公式:

主要是用到正弦曲线公式为: y=Asin(ωx+φ)+k
private var A: CGFloat = 0 // 振幅
private var ω: CGFloat = 0 // 角速度
private var φ: CGFloat = Double.pi.cgFloat
private var k: CGFloat = 10 // 偏距

思路:

使用CADisplayLink不断的重新绘画CAShapeLayer的路径

import UIKit

class YYWaterView: UIView {
    
    @IBInspectable var speed: CGFloat = 0 // 建议 1~10
    @IBInspectable var swingHeight: CGFloat = 20  // 不可以超过高或者
    @IBInspectable var palstance: CGFloat = 1  // 角速度 建议1~10
    @IBInspectable var waterWaveColor: UIColor = UIColor.blue
    @IBInspectable var directionType: Int = 1
    
    override func awakeFromNib() {
        super.awakeFromNib()
        self.backgroundColor = UIColor.clear
    }
    
    convenience init(frame: CGRect, speed: CGFloat, swingHeight: CGFloat = 20, palstance: CGFloat = 1, waterWaveColor: UIColor = UIColor.blue, directionType: WaterDirectionType = .up) {
        self.init(frame: frame)
        
        self.speed = speed
        self.swingHeight = swingHeight
        self.waterWaveColor = waterWaveColor
        self.directionType = directionType.rawValue
    }
    
    enum WaterDirectionType: Int {
        case up = 1, down = 2, left = 3, right = 4
    }
    
    private var speedX: CGFloat = 0 // x轴移动速度
    private var A: CGFloat = 0 // 振幅 
    private var ω: CGFloat = 0 // 角速度 大于0
    private var φ: CGFloat = Double.pi.cgFloat 
    private var k: CGFloat = 10 // 偏距
    //正弦曲线公式为: y=Asin(ωx+φ)+k
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        self.layer.addSublayer(waterLayer)

        configData()
        
        displayLink.add(to: RunLoop.current, forMode: .commonModes)
    }
    
    private func configData() {
        switch WaterDirectionType(rawValue: directionType)! {
        case .up, .down:
            A = self.swingHeight >= self.bounds.height ? self.bounds.height : self.swingHeight
            k = self.bounds.height
            ω = palstance*Double.pi.cgFloat / self.bounds.width
            break
        case .left, .right:
            A = self.swingHeight >= self.bounds.width ? self.bounds.width : self.swingHeight
            k = self.bounds.width
            ω = Double.pi.cgFloat / self.bounds.height
            break
        }
        
        speedX = ω * speed
    }
    
    lazy var waterLayer: CAShapeLayer = {
        let layer = CAShapeLayer()
        layer.frame = self.bounds
        layer.backgroundColor = UIColor.clear.cgColor
        return layer
    }()
    
    lazy var displayLink: CADisplayLink = {
        let link = CADisplayLink(target: self, selector: #selector(displayLinkAction))
        return link
    }()
    
    @objc func displayLinkAction() {
        self.update()
    }
    
    private func update() {
        _ = autoreleasepool { () -> CGMutablePath in
            self.φ += self.speedX
            var x: CGFloat = 0
            var y: CGFloat = 0
            let waterPath = CGMutablePath()
            
            switch WaterDirectionType(rawValue: directionType)! {
            case .up:
                waterPath.move(to: CGPoint(x: 0, y: 0))
                while x <= self.bounds.width {
                    y = self.A * sin(self.ω * x + self.φ) + self.A
                    waterPath.addLine(to: CGPoint(x: x, y: y))
                    x += 0.1
                }
                waterPath.addLine(to: CGPoint(x: self.bounds.width, y: 0))
                waterPath.addLine(to: CGPoint(x: self.bounds.width, y: self.bounds.height))
                waterPath.addLine(to: CGPoint(x: 0, y: self.bounds.height))
                waterPath.addLine(to: CGPoint(x: 0, y: 0))
                break
            case .down:
                waterPath.move(to: CGPoint(x: 0, y: self.bounds.height))
                while x <= self.bounds.width {
                    y = self.A * sin(self.ω * x + self.φ) + k - self.A
                    waterPath.addLine(to: CGPoint(x: x, y: y))
                    x += 0.1
                }
                waterPath.addLine(to: CGPoint(x: self.bounds.width, y: self.bounds.height))
                waterPath.addLine(to: CGPoint(x: self.bounds.width, y: 0))
                waterPath.addLine(to: CGPoint(x: 0, y: 0))
                waterPath.addLine(to: CGPoint(x: 0, y: self.bounds.height))
                break
            case .left:
                waterPath.move(to: CGPoint(x: 0, y: 0))
                while x <= self.bounds.height {
                    y = self.A * sin(self.ω * x + self.φ) + self.A
                    waterPath.addLine(to: CGPoint(x: y, y: x))
                    x += 0.1
                }
                waterPath.addLine(to: CGPoint(x: 0, y: self.bounds.height))
                waterPath.addLine(to: CGPoint(x: self.bounds.width, y: self.bounds.height))
                waterPath.addLine(to: CGPoint(x: self.bounds.width, y: 0))
                waterPath.addLine(to: CGPoint(x: 0, y: 0))
                break
            case .right:
                waterPath.move(to: CGPoint(x: 0, y: 0))
                waterPath.addLine(to: CGPoint(x: self.bounds.width, y: 0))
                while x <= self.bounds.height {
                    y = self.A * sin(self.ω * x + self.φ) + k - self.A
                    waterPath.addLine(to: CGPoint(x: y, y: x))
                    x += 0.1
                }
                waterPath.addLine(to: CGPoint(x: 0, y: self.bounds.height))
                waterPath.addLine(to: CGPoint(x: 0, y: 0))
                break
            }
            
            waterPath.closeSubpath()

            self.waterLayer.path = waterPath
            self.waterLayer.fillColor = self.waterWaveColor.cgColor
            return waterPath
        }
    }
    
    deinit {
        displayLink.remove(from: RunLoop.current, forMode: .commonModes)
        displayLink.invalidate()
    }
    
}
使用:

xib


WX20171216-143606@2x.png

代码
convenience init(frame: CGRect, speed: CGFloat, swingHeight: CGFloat = 20, palstance: CGFloat = 1, waterWaveColor: UIColor = UIColor.blue, directionType: WaterDirectionType = .up) 方法初始化

代码链接

https://github.com/kongzichixiangjiao/YE
YYWaterView类中

推荐阅读更多精彩内容

  • 效果图 正弦波纹 计算公式 y =Asin(ωx+φ)+CA表示振幅,也就是使用这个变量来调整波浪的高度ω表示周期...
    卖劈柴的小蓝孩阅读 352评论 0 1
  • 在网易新闻和其他的APP中,大家可能都观察到了在个人中心里面,有一个水波纹一样的动画效果,这个功能还是非常的有用的...
    我在鄱阳湖边阅读 735评论 0 6
  • 整体思路 1.创建路径(path),使用正弦函数计算一点坐标(x,y),将所有的点连接成线,绘画出路径。2.创建C...
    淘代码者阅读 274评论 0 1
  • 婚宴归来 前记:春节时就得知学妹扬三月二十七日举行婚礼,我很高兴收到邀请,并准备用心置办一份别致的礼品。思来想去就...
    无无尘土阅读 33评论 0 0
  • 我的妈妈抵得上100个好老师 今天是母亲节,在这里先祝天下的母亲,节日快乐。 没打电话的赶紧给妈妈打个电话,『我爱...
    鞠凌子阅读 259评论 0 2