SwiftUI 屏幕切换动画失效原因及自定义实现方案咨询

一、动画失效的核心原因 #

1. 视图层级切换逻辑错误：原代码用switch在ZStack中仅渲染当前匹配的视图，旧视图会被直接从视图树中移除，没有机会执行transition的移除动画。transition需要新旧视图同时存在于视图层级中，才能完成插入/移除的动画过渡。
2. 动画触发方式错误：原代码未在状态变更时用withAnimation包裹，SwiftUI无法识别该状态变化需要应用动画；同时将.animation修饰符添加在单个视图上，而非控制切换的容器或通过withAnimation全局触发。
3. 视图生命周期不满足动画要求：switch的切换逻辑导致旧视图被立即销毁，无法完成完整的动画周期，直接出现即时切换。

二、修复步骤及完整代码 #

1. 修正Router的状态更新逻辑 #

在状态变更时用withAnimation包裹，明确告知SwiftUI为这次变化应用动画：

enum Screen : Equatable {
    case blue
    case red
}

class Router: ObservableObject {
    public static let shared = Router()
    
    @Published var currentScreen:Screen = .blue
    @Published var previousScreen:Screen = .blue
    
    func goToScreen(screen: Screen) {
        withAnimation(.easeInOut(duration: 3.0)) {
            previousScreen = currentScreen
            currentScreen = screen
        }
    }
}

2. 调整视图层级，保留新旧视图 #

修改App的视图结构，让新旧视图同时渲染，通过zIndex控制显示层级，确保transition能执行插入/移除动画：

// 自定义过渡动画（保留你的实现）
extension AnyTransition {
    static var moveAndFade: AnyTransition {
        .asymmetric(
            insertion: .move(edge: .trailing).combined(with: .opacity),
            removal: .scale.combined(with: .opacity)
        )
    }
}

// 示例视图（假设你已经定义了RedView和BlueView）
struct RedView: View {
    var body: some View {
        Color.red.ignoresSafeArea()
    }
}

struct BlueView: View {
    var body: some View {
        Color.blue.ignoresSafeArea()
    }
}

@main
struct RouterAnimationApp: App {
    @ObservedObject var router = Router.shared

    var body: some Scene {
        WindowGroup {
            ZStack {
                // 同时渲染两个视图，根据currentScreen控制显示层级
                if router.currentScreen == .blue || router.previousScreen == .blue {
                    BlueView()
                        .transition(.moveAndFade)
                        .zIndex(router.currentScreen == .blue ? 1 : 0)
                }
                if router.currentScreen == .red || router.previousScreen == .red {
                    RedView()
                        .transition(.moveAndFade)
                        .zIndex(router.currentScreen == .red ? 1 : 0)
                }
                
                // 控制按钮
                HStack(spacing: 20) {
                    Button(action: {
                        Router.shared.goToScreen(screen: .red)
                    }, label: {
                        Text("切换到红色屏幕")
                            .padding()
                            .background(.white.opacity(0.2))
                            .cornerRadius(8)
                    })
                    Button(action: {
                        Router.shared.goToScreen(screen: .blue)
                    }, label: {
                        Text("切换到蓝色屏幕")
                            .padding()
                            .background(.white.opacity(0.2))
                            .cornerRadius(8)
                    })
                }
                .foregroundColor(.white)
            }
        }
    }
}

三、自定义屏幕切换动画的关键点 #

• 使用asymmetric过渡：可以为视图的插入和移除定义不同的动画效果，比如示例中插入时从右侧移入+淡入，移除时缩放+淡出。
• 确保视图存在周期：必须让新旧视图同时存在于视图树中（通过条件渲染保留旧视图直到动画完成），否则transition无法生效。
• 统一动画触发源：优先使用withAnimation包裹状态变更，而非在单个视图上添加.animation修饰符，这样能确保所有关联视图的动画同步触发。

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