SwiftUI中的波形动画指南

2023-09-04 20:22:03

绘制正弦波形状

要绘制正弦波形状，我们需要创建一个自定义Shape结构体。这个Shape结构体将包含一个path属性，该属性定义了形状的路径。为了创建正弦波路径，我们将使用sin()函数。

struct SineWaveShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let width = rect.width
        let height = rect.height
        let wavelength = width / 4
        let amplitude = height / 3
        let origin = CGPoint(x: -wavelength, y: height / 2)

        for x in stride(from: 0, to: width, by: 1) {
            let y = sin((x - origin.x) * wavelength) * amplitude + origin.y
            if x == 0 {
                path.move(to: CGPoint(x: 0, y: y))
            } else {
                path.addLine(to: CGPoint(x: x, y: y))
            }
        }

        return path
    }
}

创建动画

现在我们已经有了自定义的正弦波形状，我们可以将其与动画结合起来。我们将使用Animation协议来创建动画。Animation协议允许我们指定动画的持续时间、延迟和曲线。

struct SineWaveAnimation: View {
    @State private var phase = 0.0

    var body: some View {
        SineWaveShape()
            .stroke(Color.blue, lineWidth: 2)
            .frame(width: 200, height: 200)
            .animation(Animation.linear(duration: 2).repeatForever(autoreverses: true), value: phase)
    }
}