How can I make moving/live dash line in SwiftUI?

Question

I have this Rectangle which I want give moving dash effect to it! If the Shape was Circle I could simply rotate the view with animation, since this is a Rectangle! I have no other idea to make that goal possible!

struct ContentView: View {
    
    var body: some View {
        
        Rectangle()
            .strokeBorder(style: StrokeStyle(lineWidth: 5, dash: [10]))
            .frame(width: 200, height: 200)
            .foregroundColor(Color.blue)
        
    }
    
}

Answer 1

This is sometimes called the “marching ants” effect.

Animate the dashPhase property of the StrokeStyle. You want the phase to go from 0 to the total length of the dash pattern. Since you only provided one value in the dash pattern, that value is used for the on-part and the off-part. So the total length of your pattern is 10 + 10 = 20.

struct ContentView: View {
    @State var phase: CGFloat = 0
    
    var body: some View {
        Rectangle()
            .strokeBorder(
                style: StrokeStyle(
                    lineWidth: 5,
                    dash: [10],
                    dashPhase: phase))
            .animation(
                Animation.linear(duration: 1)
                    .repeatForever(autoreverses: false),
                value: phase)
            .frame(width: 200, height: 200)
            .foregroundColor(Color.blue)
            .onAppear {
                phase = 20
            }
    }
}