如何在 SwiftUI 的多个视图之间添加依赖关系 animation？

Question

我想用 SwiftUI 实现 animation 的点进度。

我认为我们需要在每个点 animation 和另一个点 animation 之间添加依赖关系，有了这样的依赖关系，我们可以实现下面的动画！

参考

我尝试使用以下代码，但运气不好，我知道这不是实现此类 animation 的正确方法。

如果有人有解决方案，请随时在您的代码中回答。

感谢您的帮助，不胜感激！

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