Swift 如何在显示时按顺序加载视图中的子视图

所以我尝试在父视图GameView中加载我的子视图。基本上我希望GameView中的每个玩家子视图都能按顺序上传。所以我做的是让我的动画过渡到延迟增量1.5。但是，仍然会加载游戏视图中的所有视图，然后显示屏幕。我怎样才能使它更有条理？谢谢

struct GameView: View {
    @ObservedObject var game:GameViewModel

    var body: some View {
        ZStack{
            Rectangle().foregroundColor(Color.init(red: 0.21, green: 0.40, blue: 0.30, opacity: 1.00)).edgesIgnoringSafeArea(.all)
            VStack {
                Spacer()

                HandView.init(hand: game.dealer).offset(x: 0, y: 0).animation(Animation.easeInOut(duration: 0.5).delay(6))

                HStack {PlayerView.init(player: self.game.players[0]).padding(.all).rotationEffect(Angle.init(degrees: 90)).scaledToFit().scaleEffect(0.7).animation(Animation.easeInOut(duration: 0.5).delay(0))
                    Spacer().frame(minWidth: 10)
                    PlayerView.init(player: self.game.players[2]).padding(.all).rotationEffect(Angle.init(degrees: -90)).scaledToFit().scaleEffect(0.7).animation(Animation.easeInOut(duration: 0.5).delay(2))
                }
                PlayerView.init(player: self.game.players[1]).padding(.all).animation(Animation.easeInOut(duration: 0.5).delay(4))
                HStack(spacing: 0)
                { Button(action: {
                    self.game.resetGame()
                }, label: {
                    Text("Reset")
                }).offset(x: -8, y: 0)}.padding(.leading, -100)

            }
        }

    }
}

---

为方便起见，可以使用此视图扩展在视图出现时触发动画：

下面是一个简单的演示，按顺序显示具有初始延迟的两个圆：

struct ContentView: View {
    @State var opacityCircle1 = 0.0
    @State var opacityCircle2 = 0.0

    @State var animationsLoaded = false

    var body: some View {
        VStack {
            Circle()
                .opacity(opacityCircle1)
                .animate(using: Animation.easeInOut(duration: 2).delay(1)) { self.opacityCircle1 = 1.0 }
            Button(action: {
                print("tapped")
            }) {
                Circle()
                    .opacity(opacityCircle2)
                    .animate(using: Animation.easeInOut(duration: 2).delay(3)) { self.opacityCircle2 = 1.0 }
            }
            .disabled(!animationsLoaded)
        }.onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
              self.animationsLoaded = true
            }
        }
    }
}

---

如果希望按钮仅在动画完成后响应，则引入self.animationsload变量来控制按钮的操作。

hmm那么不透明度是最好的方法还是其他方法？我在这个视图中有一些可点击的按钮，所以不透明度可能会导致这个问题，因为我不希望用户能够点击按钮直到它被点击为止loaded@RohanGarg显然，可能还有其他解决方案，但我相信不透明度正是您在这种情况下所需要的-视图将始终存在，布局将保持不变。我更新了我的答案，有可能在加载所有内容后才执行操作。这只是一个概念，因为你有自定义视图而不是按钮，但我希望你能理解。快速问题：我如何处理动态数量的圆圈？@RohanGarg可能有数组？一个用于圆形，一个用于不透明@State var opacityArray:[Double]并在循环中使用它。如何让父视图传递这个新计算的数组？我的用例是父对象从其ViewModel环境对象中获取圆的数量。但是，父视图如何为其子视图创建一个不透明数组呢？那么我的viewmodel是否需要提供这些不透明度？

extension View {
    func animate(using animation: Animation, _ action: @escaping () -> Void) -> some View {
        return onAppear {
            withAnimation(animation) {
                action()
            }
        }
    }
}

struct ContentView: View {
    @State var opacityCircle1 = 0.0
    @State var opacityCircle2 = 0.0

    @State var animationsLoaded = false

    var body: some View {
        VStack {
            Circle()
                .opacity(opacityCircle1)
                .animate(using: Animation.easeInOut(duration: 2).delay(1)) { self.opacityCircle1 = 1.0 }
            Button(action: {
                print("tapped")
            }) {
                Circle()
                    .opacity(opacityCircle2)
                    .animate(using: Animation.easeInOut(duration: 2).delay(3)) { self.opacityCircle2 = 1.0 }
            }
            .disabled(!animationsLoaded)
        }.onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
              self.animationsLoaded = true
            }
        }
    }
}