SwiftUI弃用.animation()后视图切换动画异常问题求助

问题分析 #

你之前使用全局.animation(.easeInOut(duration: 0.5))时，SwiftUI会监听所有状态变化并自动触发动画，但这个API已被弃用。换成.animation(_:value:)后，你只指定了监听showHealthView，但视图切换还依赖showFuelView、showTrainView、showHeartView这几个状态，同时mainContent的显示条件是多个布尔值的组合，单一状态的监听无法覆盖所有触发过渡的场景，导致动画失效或异常。

解决方案1：使用组合状态值触发动画 #

如果想保留现有的多个布尔变量结构，可以创建一个组合的可比较值，把所有影响视图切换的状态打包进去，让动画监听这个组合值：

var body: some View {
    ZStack {
        if !showHealthView && !showFuelView && !showTrainView && !showHeartView {
            mainContent
                .transition(AnyTransition.move(edge: transitionDirection))
        }
        
        if showHealthView {
            HealthView(showHealthView: $showHealthView)
                .transition(AnyTransition.move(edge: .leading))
        } else if showFuelView {
            FuelView(showFuelView: $showFuelView)
                .transition(AnyTransition.move(edge: .bottom))
        } else if showTrainView {
            TrainView(showTrainView: $showTrainView)
                .transition(AnyTransition.move(edge: .bottom))
        } else if showHeartView {
            HeartView(showHeartView: $showHeartView)
                .transition(AnyTransition.move(edge: .trailing))
        }
    }
    // 监听所有相关状态的组合值，任意一个布尔值变化都会触发动画
    .animation(.easeInOut(duration: 0.5), value: (showHealthView, showFuelView, showTrainView, showHeartView))
    .navigationBarHidden(true)
}

这个组合元组会在任意一个布尔值变化时更新，从而触发动画，确保所有视图切换都能应用过渡效果。

解决方案2：改用单一枚举管理视图状态 #

更推荐的方式是用一个枚举统一管理当前显示的视图，避免多个布尔变量的状态冲突，同时让动画触发逻辑更清晰：

1. 先定义视图枚举：

enum ActiveView {
    case main, health, fuel, train, heart
}

// 替换原来的四个@State布尔变量
@State private var activeView: ActiveView = .main

2. 重构视图结构：

var body: some View {
    ZStack {
        switch activeView {
        case .main:
            mainContent
                .transition(AnyTransition.move(edge: transitionDirection))
        case .health:
            HealthView(onDismiss: { activeView = .main })
                .transition(AnyTransition.move(edge: .leading))
        case .fuel:
            FuelView(onDismiss: { activeView = .main })
                .transition(AnyTransition.move(edge: .bottom))
        case .train:
            TrainView(onDismiss: { activeView = .main })
                .transition(AnyTransition.move(edge: .bottom))
        case .heart:
            HeartView(onDismiss: { activeView = .main })
                .transition(AnyTransition.move(edge: .trailing))
        }
    }
    // 只监听单一枚举状态，所有视图切换都会触发动画
    .animation(.easeInOut(duration: 0.5), value: activeView)
    .navigationBarHidden(true)
}

3. 调整子视图的关闭逻辑（以HealthView为例）：

struct HealthView: View {
    let onDismiss: () -> Void
    
    var body: some View {
        // 你的视图内容
        Button("返回主界面") {
            onDismiss()
        }
    }
}

这种方式彻底避免了多个布尔值之间的状态矛盾，动画只会在activeView变化时触发，过渡效果会完全符合预期。

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