iOS 简单的双层波浪动画

效果图

具体实现

1、通过CADisplayLink 改变 CAShapeLayer.path 绘制三角函数曲线实现 y=Asin（ωx+φ）+h

y = 9sin(Pi/40*x ) + 9

部分代码

        let w = CGFloat((Double.pi) / Double(wavelength))
        let path = UIBezierPath()
        path.move(to: CGPoint.init(x: 0, y:bounds.height))
        for i in 0..<Int(bounds.width) {
            let x = CGFloat(i)
            let  y = A * sin(w * CGFloat(i) + offsetX) + offsetY
            path.addLine(to: CGPoint.init(x: x, y: y))
        }
        path.addLine(to: CGPoint.init(x: bounds.width, y:bounds.height))
        path.close()
        waveShape.path = path.cgPath

2、同理再加入另一条波浪，填充颜色与之前波浪相同，颜色不透明度为50%

 waveShape.fillColor = waveColor.cgColor
 otherWaveShape.fillColor = waveColor.withAlphaComponent(0.5).cgColor

3、 为使波浪有一定的过渡效果加入一个渐变遮罩
创建一个 CAGradientLayer 并设置为 mask

private var gradientLayer: CAGradientLayer = {
        let layer = CAGradientLayer()
        layer.colors = [UIColor.white.cgColor, UIColor.clear.cgColor];
        layer.startPoint = CGPoint.init(x: 0.5, y: 0.8)
        layer.endPoint = CGPoint.init(x: 0.5, y: 0)
        return layer
    }()

self.waveShape.mask = self.gradientLayer;

4、使波浪动画开始和结束有一定的淡入淡出效果
使三角函数 振幅 A 随着二次函数变化
y = 10 - (x - √10)^2 //振幅 A 周期公式 x∈(0,2*√10）；

振幅变化函数

private var x:CGFloat = 0; //振幅变化变量  x∈(0,2 * √amplitude）

 A = amplitude - pow((x - sqrt(amplitude)), 2)

经过上面的几步基本实现上面的效果

已经封装好使用起来非常方便

// @IBOutlet weak var waveView: WaveView!
 
        //颜色
//        waveView.waveColor = UIColor.blue
        //动画时间2s
        waveView.speed = 2
        //浪高
        waveView.amplitude = 8
        //波长
        waveView.wavelength = 320
        //持续动画
    // waveView.alwaysAnimation = true

开始动画

waveView.startWave()

Demo已经上传GitHub传送门