如何正确设置 UIBezierPath 的动画以产生水/波浪效果？

我正在尝试做一个UIBezierPath像波浪或水一样动画。类似于这样的事情。https://dribbble.com/shots/3994990-Waves-Loading-Animation https://dribbble.com/shots/3994990-Waves-Loading-Animation

我将此动画用作一种带有数据点 (0-100) 的折线图。我已经正确绘制了路径，但在正确设置动画时遇到问题。

目前看起来像这样https://i.stack.imgur.com/jXLEK.jpg https://i.stack.imgur.com/jXLEK.jpg运动超级有脊/快速

let dataPoints: [Double]

var displayLink: CADisplayLink?
var startTime: CFAbsoluteTime?

let background: UIView = {
    let view = UIView()
    return view
}()

let shapeLayer: CAShapeLayer = {
    let layer = CAShapeLayer()
    return layer
}()

init(frame: CGRect, data: [Double], precip: [String]) {
    self.dataPoints = data
    super.init(frame: frame)
    addSubview(background)
    background.anchor(top: topAnchor, left: leftAnchor, bottom: bottomAnchor, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
}

override func layoutSubviews() {
    super.layoutSubviews()
    background.layer.addSublayer(shapeLayer)
    shapeLayer.strokeColor = UIColor.waterColor.cgColor
    shapeLayer.fillColor = UIColor.waterColor.cgColor
    startDisplayLink()
}

func wave(at elapsed: Double) -> UIBezierPath {
    let maxX = bounds.width
    let maxY = bounds.height

    func f(_ y: Double) -> CGFloat {
        let random = CGFloat.random(in: 1.0...5.0)
        return CGFloat(y) + sin(CGFloat(elapsed/2) * random * .pi)
    }

    func z(_ x: CGFloat) -> CGFloat {
        let random = CGFloat.random(in: 1.0...2.0)

        let position = Int.random(in: 0...1)
        if(position == 0) {
            return x + random
        } else {
            return x - random
        }
    }

    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: maxY))

    let steps = bounds.width/CGFloat(24)
    var start: CGFloat = steps
    for i in 0..<24 {

        let x = z(start)
        let y = maxY - f(dataPoints[i]*100)

        let point = CGPoint(x: x, y: y)
        path.addLine(to: point)

        start+=steps
    }
    path.close()
    return path
}

func startDisplayLink() {
    startTime = CFAbsoluteTimeGetCurrent()
    displayLink?.invalidate()
    displayLink = CADisplayLink(target: self, selector:#selector(handleDisplayLink(_:)))
    displayLink?.add(to: .current, forMode: .common)
    displayLink?.preferredFramesPerSecond = 11
}

func stopDisplayLink() {
    displayLink?.invalidate()
    displayLink = nil
}

@objc func handleDisplayLink(_ displayLink: CADisplayLink) {
    let elapsed = CFAbsoluteTimeGetCurrent() - startTime!
    shapeLayer.path = wave(at: elapsed).cgPath
}

一些观察结果：

1. 你正在呼唤random inside f(_:) and z(_:)。这意味着每次您调用其中任何一个时，您每次都会得到不同的随机值。所以它会疯狂地跳来跳去。

   您希望将它们移至常量，预先定义随机参数，然后从那时起使用这些相同的因子。

2. 您正在以每秒 11 帧 (fps) 的速度进行更新。如果您希望其流畅，请将其保留为设备默认值。

3. 您正在渲染 24 点。除非你开始使用贝塞尔曲线（正如我在回答你的另一个问题 https://stackoverflow.com/a/60744144/1271826），这将产生非常大的输出。我会把它调高（例如，在 iPhone 上，200 会产生看起来相当平滑的波浪）。

4. 在关闭路径之前，您缺少一条到视图右下角的线。

5. 你的波函数不太正确，返回x加上正弦函数（这将产生对角波）。另外，如果你想让它感觉像波浪，我不仅会根据经过的时间来改变波浪的振幅，而且还会改变整体潮汐高度。例如。

   let maxAmplitude: CGFloat = 0.1
   let maxTidalVariation: CGFloat = 0.1
   let amplitudeOffset = CGFloat.random(in: -0.5 ... 0.5)
   let amplitudeChangeSpeedFactor = CGFloat.random(in: 4 ... 8)
   
   let defaultTidalHeight: CGFloat = 0.50
   let saveSpeedFactor = CGFloat.random(in: 4 ... 8)
   
   func wave(at elapsed: Double) -> UIBezierPath {
       func f(_ x: Double) -> CGFloat {
           let elapsed = CGFloat(elapsed)
           let amplitude = maxAmplitude * abs(fmod(CGFloat(elapsed/2), 3) - 1.5)
           let variation = sin((elapsed + amplitudeOffset) / amplitudeChangeSpeedFactor) * maxTidalVariation
           let value = sin((elapsed / saveSpeedFactor + CGFloat(x)) * 4 * .pi)
           return value * amplitude / 2 * bounds.height + (defaultTidalHeight + variation) * bounds.height
       }
   
       let path = UIBezierPath()
       path.move(to: CGPoint(x: bounds.minX, y: bounds.maxY))
   
       for dataPoint in dataPoints {
           let x = CGFloat(dataPoint) * bounds.width + bounds.minX
           let y = bounds.maxY - f(dataPoint)
           let point = CGPoint(x: x, y: y)
           path.addLine(to: point)
       }
       path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
       path.close()
       return path
   }
   

6. 注意文档 https://developer.apple.com/documentation/corefoundation/1543542-cfabsolutetimegetcurrent for CFAbsoluteTimeGetCurrent警告我们

   重复调用此函数并不能保证结果单调递增。

   我建议使用CACurrentMediaTime https://developer.apple.com/documentation/quartzcore/1395996-cacurrentmediatime?language=occ反而。

7. 我建议输dataPoints共。它没有提供任何价值。我只想继续计算dataPoint从视图的宽度。

8. 我会坚持标准init(frame:)。这样，您既可以通过编程方式添加视图，也可以直接在 Interface Builder 中添加它。

9. 请记住使您的显示链接无效deinit.

Thus:

@IBDesignable
class WavyView: UIView {

    private weak var displayLink: CADisplayLink?
    private var startTime: CFTimeInterval = 0
    private let maxAmplitude: CGFloat = 0.1
    private let maxTidalVariation: CGFloat = 0.1
    private let amplitudeOffset = CGFloat.random(in: -0.5 ... 0.5)
    private let amplitudeChangeSpeedFactor = CGFloat.random(in: 4 ... 8)

    private let defaultTidalHeight: CGFloat = 0.50
    private let saveSpeedFactor = CGFloat.random(in: 4 ... 8)

    private lazy var background: UIView = {
        let background = UIView()
        background.translatesAutoresizingMaskIntoConstraints = false
        background.layer.addSublayer(shapeLayer)
        return background
    }()

    private let shapeLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.strokeColor = UIColor.waterColor.cgColor
        shapeLayer.fillColor = UIColor.waterColor.cgColor
        return shapeLayer
    }()

    override init(frame: CGRect = .zero) {
        super.init(frame: frame)

        configure()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)

        configure()
    }

    override func willMove(toSuperview newSuperview: UIView?) {
        super.willMove(toSuperview: newSuperview)

        if newSuperview == nil {
            displayLink?.invalidate()
        }
   }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()

        shapeLayer.path = wave(at: 0)?.cgPath
    }
}

private extension WavyView {

    func configure() {
        addSubview(background)
        background.anchor(top: topAnchor, left: leftAnchor, bottom: bottomAnchor, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)

        startDisplayLink()
    }

    func wave(at elapsed: Double) -> UIBezierPath? {
        guard bounds.width > 0, bounds.height > 0 else { return nil }

        func f(_ x: CGFloat) -> CGFloat {
            let elapsed = CGFloat(elapsed)
            let amplitude = maxAmplitude * abs(fmod(elapsed / 2, 3) - 1.5)
            let variation = sin((elapsed + amplitudeOffset) / amplitudeChangeSpeedFactor) * maxTidalVariation
            let value = sin((elapsed / saveSpeedFactor + x) * 4 * .pi)
            return value * amplitude / 2 * bounds.height + (defaultTidalHeight + variation) * bounds.height
        }

        let path = UIBezierPath()
        path.move(to: CGPoint(x: bounds.minX, y: bounds.maxY))

        let count = Int(bounds.width / 10)

        for step in 0 ... count {
            let dataPoint = CGFloat(step) / CGFloat(count)
            let x = dataPoint * bounds.width + bounds.minX
            let y = bounds.maxY - f(dataPoint)
            let point = CGPoint(x: x, y: y)
            path.addLine(to: point)
        }
        path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
        path.close()
        return path
    }

    func startDisplayLink() {
        startTime = CACurrentMediaTime()
        displayLink?.invalidate()
        let displayLink = CADisplayLink(target: self, selector: #selector(handleDisplayLink(_:)))
        displayLink.add(to: .main, forMode: .common)
        self.displayLink = displayLink
    }

    func stopDisplayLink() {
        displayLink?.invalidate()
    }

    @objc func handleDisplayLink(_ displayLink: CADisplayLink) {
        let elapsed = CACurrentMediaTime() - startTime
        shapeLayer.path = wave(at: elapsed)?.cgPath
    }
}

得出：