SwiftUI视图切换无过渡效果：GameView与MenuView切换无动画

我想在GameView与MenuView之间实现视图切换的过渡效果，但无论在模拟器还是iPhone真机上，都无法看到任何过渡动画。以下是我的视图切换条件判断及过渡设置代码：

App结构代码 #

struct gameApp: App {
    @ObservedObject var appState = AppState(isGameActive: false)
    
    var body: some Scene {
        WindowGroup {
            
            if appState.isGameActive == false {
                MenuView()
                    .environmentObject(appState)
                    .transition(.move(edge: .trailing))
                    .animation(.default, value: appState.isGameActive)
            } else {
                GameView(difficulity: 1)
                    .transition(.move(edge: .trailing))
                    .animation(.default, value: appState.isGameActive)
            }
        }
    }
}

MenuView切换按钮代码 #

@EnvironmentObject var appState: AppState

var body: some View {
    
    ZStack {
        VStack {
            Spacer()
            Text("Tic Tac Toe")
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(.indigo)
                
            Image("MainLogo")
                .resizable()
                .frame(width: 150, height: 150)
            Spacer()
            Button("Start") {
                withAnimation {
                    appState.isGameActive.toggle()
                }
            }
            .padding()
            .padding(.horizontal, 16.0)
            .background(.indigo)
            .foregroundColor(Color.white)
            .containerShape(RoundedRectangle(cornerRadius: 16))
        .font(.headline)
            Spacer()
        }
    }
}

问题根源及修复方案如下：

1. 容器层级错误：SwiftUI的过渡动画需要切换的视图处于同一个父容器中，才能正确触发过渡效果。原代码直接在WindowGroup下做if-else判断，没有统一的容器包裹，导致过渡无法生效。

2. 动画修饰符冲突：同时在子视图上添加.animation修饰符，又在按钮中使用withAnimation，会导致动画行为异常，建议统一用withAnimation触发动画。

3. 可观察对象生命周期问题：在App结构体中初始化AppState时，应该用@StateObject而非@ObservedObject，确保对象生命周期与App一致。

修改后的App结构代码 #

struct gameApp: App {
    @StateObject var appState = AppState(isGameActive: false)
    
    var body: some Scene {
        WindowGroup {
            // 用ZStack包裹两个视图，保证处于同一层级
            ZStack {
                if !appState.isGameActive {
                    MenuView()
                        .environmentObject(appState)
                        .transition(.move(edge: .leading)) // 退出时向左滑出
                } else {
                    GameView(difficulity: 1)
                        .transition(.move(edge: .trailing)) // 进入时从右滑入
                }
            }
        }
    }
}

优化说明 #

• 用ZStack包裹两个视图，让它们共享同一个父容器，过渡动画可以正确识别视图的添加/移除。
• 给两个视图设置相反的过渡方向，让切换时的滑动效果更自然。
• 移除子视图上的.animation修饰符，依赖按钮中的withAnimation来触发动画，避免冲突。
• 将@ObservedObject改为@StateObject，修正可观察对象的生命周期。

按钮部分代码无需修改，withAnimation已经正确包裹了状态切换操作，能确保动画触发。

内容的提问来源于stack exchange，提问作者dor sahar