ios – Masks a number of shapes in SwiftUI

0
65


I am attempting to create a customized progress bar like so (ignore the thumb for now):

enter image description here

In the intervening time I can progressively reveal the wave utilizing one other rectangle utilized as a masks. I am undecided find out how to clip the left portion of the road because the progress will increase. I attempted setting the wave view with its masks as a masks to the road however that did not work. Ought to I replace the width of the road based mostly on the progress or is it potential to make use of a masks in a approach such that, because the wave begins to show seen from the vanguard, the road shrinks in direction of the trailing edge? Please advise on an environment friendly approach to do that. Any assistance is appreciated.

struct Line: Form {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.transfer(to: CGPoint(x: 0, y: rect.peak/2))
        path.addLine(to: CGPoint(x: rect.width, y: rect.peak/2))
        return path
    }
}

struct Wave: Form {
    var energy: Double
    var frequency: Double
    var part: Double
    var animatableData: Double {
        get { part }
        set { self.part = newValue }
    }
    
    func path(in rect: CGRect) -> Path {
        var path = Path()

        let width = Double(rect.width)
        let peak = Double(rect.peak)
        let midHeight = peak / 2
        let wavelength = width / frequency

        let firstX = 0.0
        let firstRelativeX = firstX / wavelength
        let firstSine = sin(firstRelativeX + part)
        let firstY = energy * firstSine + midHeight
        path.transfer(to: CGPoint(x: firstX, y: firstY))

        for x in stride(from: 0.0, via: width, by: 1) {
            let relativeX = x / wavelength
            let sine = sin(relativeX + part)
            let y = energy * sine + midHeight
            path.addLine(to: CGPoint(x: x, y: y))
        }

        return path
    }
}

struct ContentView: View {
    @State personal var part = 0.0
    @State personal var progress = 0.0

    var physique: some View {
        VStack {
            GeometryReader(content material: { geometry in
                
                ZStack {
                    
                    Line()
                        .stroke(Coloration.white.opacity(0.5), lineWidth: 5.0)
                        .body(width: geometry.measurement.width)
                    
                    Wave(energy: 10, frequency: 30, part: part)
                        .stroke(Coloration.white, lineWidth: 5)
                        .masks(
                            Rectangle()
                                .body(width: (geometry.measurement.width * progress), peak: geometry.measurement.peak)
                                .padding(.trailing, geometry.measurement.width * (1 - progress))
                        )
                }
            })
            
            Slider(worth: $progress, in: 0...1)
                .padding()
        }
        .background(Coloration.black.ignoresSafeArea())
        .onAppear {
            withAnimation(Animation.linear(period: 2).repeatForever(autoreverses: false)) {
                self.part = .pi * 2
            }
        }
    }
}