Question

因此，我尝试将子视图加载到父视图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 PlayerView: View {
    @State var player:Player
    var body: some View {
        HStack {
            ZStack {
                VStack(alignment: .trailing, spacing: 0){
                    ForEach(0..<self.player.hands.count, id: \.self) {
                        index in ZStack {
                            Spacer()
                            HandView.init(hand: self.player.hands[index])
                        }
                    }
                    Spacer().frame(height: 45)
                    Text(self.player.id).bold().font(Font.system(size: 20))
                    Spacer()
                }
                .padding(.all)
                if self.player.isBust{
                    self.bust
                }
            }
            if !player.isRobot{
                VStack{Button(action: {
                    self.player.requestCard()
                }, label: {
                    Text("Hit Me!")
                })
                    Button(action: {
                        DispatchQueue.main.asyncAfter(deadline: .now() + 1) { // 1 sec delay
                            self.player.requestCard()
                        }
                    }, label: {
                        Text("Stay")
                    })}
                    .offset(x: 10, y: 0)}
        }
    }
}

Answer 1

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

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

引入了self.animationsLoaded变量来控制按钮的操作（如果您希望按钮仅在动画结束后才响应）。

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

1 个答案: