How add dependency animation between multiple view in SwiftUI?

Question

I want to achieve animation for dot progress with SwiftUI.

I think we need to add dependency between each dot animation with another dot animation and, with such dependency, we can achieve the below animation!

Reference

I try with the below code but luck not works, I know it is not a proper way to achieve such animation.

If anyone has a solution feel free to answer in your code.

Thanks for the help, appreciated!

struct AnimatedDot: View {
    @State var rightAnimates = false
    
    var body: some View {
        
        ZStack {
            
            VStack(alignment: .leading) {
            HStack(alignment: .center, spacing: 0){
            Circle()
                .fill(Color.blue)
                .scaleEffect( rightAnimates ? 1: 0)
                .animation(Animation.spring().repeatForever(autoreverses: false)
                    .speed(0.7)
                    .delay(0.25))
                .offset(x: 20)
                .onAppear() {
                    self.rightAnimates.toggle()
                    }
            Circle()
            .fill(Color.blue)
            .scaleEffect( rightAnimates ? 1: 0)
            .animation(Animation.spring().repeatForever(autoreverses: false)
                .speed(0.7)
                .delay(0.5))
                .offset(x: 20).onAppear() {
                    //self.rightAnimates.toggle()
                }
            Circle()
            .fill(Color.blue)
            .scaleEffect( rightAnimates ? 1: 0.5)
            .animation(Animation.spring().repeatForever(autoreverses: false)
                .speed(0.7)
                .delay(0.75))
            .offset(x: 20)
            }.frame(height:20)
            }.frame(width: 120, height: 40)
        }
    }
}

Answer 1

Try like this with custom delay durations you want

struct AnimatedDot: View {
        
         @State var rightAnimates = false
           
           var body: some View {
               
               ZStack {
                   
                   VStack(alignment: .leading) {
                   HStack(alignment: .center, spacing: 0){
                   Circle()
                       .fill(Color.blue)
                       .scaleEffect( rightAnimates ? 1: 0)
                    .animation(Animation.linear(duration: 0.5).repeatForever()
                           .delay(0.25))
                       .offset(x: 20)
                       .onAppear() {
                           self.rightAnimates.toggle()
                           }
                   Circle()
                   .fill(Color.blue)
                   .scaleEffect( rightAnimates ? 1: 0)
                   .animation(Animation.linear(duration: 0.5).repeatForever()
                       .delay(0.5))
                       .offset(x: 20).onAppear() {
                           //self.rightAnimates.toggle()
                       }
                   Circle()
                   .fill(Color.blue)
                   .scaleEffect( rightAnimates ? 1: 0)
                   .animation(Animation.linear(duration: 0.5).repeatForever()
                       .delay(0.75))
                   .offset(x: 20)
                   }.frame(height:20)
                   }.frame(width: 120, height: 40)
               }
           }
    }