Как добавить анимацию зависимости между несколькими представлениями в SwiftUI?

Question

Я хочу добиться анимации прогресса точек с помощью SwiftUI.

Я думаю, нам нужно добавить зависимость между каждой точечной анимацией с другой точечной анимацией, и с такой зависимостью мы можем добиться анимации ниже!

Ссылка

Я пытаюсь использовать приведенный ниже код, но удача не работает, я знаю, что это неправильный способ добиться такой анимации.

Если у кого-то есть решение, не стесняйтесь отвечать в своем коде.

Спасибо за помощь, оценил!

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

Попробуйте сделать это с настраиваемой продолжительностью задержки, которую вы хотите

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)
               }
           }
    }