SwiftUI中withAnimation无动画效果的原因排查

成因分析 #

1. @AppStorage的动画兼容性限制：@AppStorage是绑定到UserDefaults的持久化状态，它的状态变更通知机制和SwiftUI原生的@State/@Binding不同，无法被动画系统完全识别。你在子视图中用withAnimation包裹@AppStorage的赋值操作，仅能影响子视图内部的UI变化，父视图中基于该状态的条件视图切换（if isFirstViewActive）不会触发动画。
2. 动画作用域未覆盖视图切换逻辑：动画的作用范围局限在子视图的按钮点击闭包内，而父视图中切换FirstView和SecondView的逻辑不在这个动画作用域里，导致视图切换是瞬间完成的，没有过渡效果。

修复方案 #

方案1：用@State同步持久化状态，让动画作用于父视图切换 #

修改ContentView，用@State管理当前活跃视图的临时状态，同时同步到@AppStorage，确保父视图的视图切换处于动画环境中：

struct ContentView: View {
    @AppStorage("firstViewActive") private var storedFirstViewActive: Bool = true
    @State private var isFirstViewActive: Bool = true
    
    var body: some View {
        VStack {
            if isFirstViewActive {
                FirstView(onSwitch: {
                    withAnimation {
                        isFirstViewActive = false
                        storedFirstViewActive = false
                    }
                })
            } else {
                SecondView(onSwitch: {
                    withAnimation {
                        isFirstViewActive = true
                        storedFirstViewActive = true
                    }
                })
            }
        }
        .onAppear {
            isFirstViewActive = storedFirstViewActive
        }
    }
}

// 子视图改为通过闭包传递切换动作，不再直接操作@AppStorage
struct FirstView: View {
    let onSwitch: () -> Void
    
    var body: some View {
        ZStack {
            Color.red.ignoresSafeArea()
            VStack {
                Spacer()
                Text("This is the first view")
                Spacer()
                Button("Go to second view", action: onSwitch)
                Spacer()
            }
        }
    }
}

struct SecondView: View {
    let onSwitch: () -> Void
    
    var body: some View {
        ZStack {
            Color.blue.ignoresSafeArea()
            VStack {
                Spacer()
                Text("This is the second view")
                Spacer()
                Button("Go to first view", action: onSwitch)
                Spacer()
            }
        }
    }
}

方案2：给子视图添加过渡动画，监听状态变更触发动画 #

如果想保留子视图操作@AppStorage的逻辑，可以在ContentView中给子视图添加过渡效果，并监听@AppStorage的变化来触发动画：

struct ContentView: View {
    @AppStorage("firstViewActive") var isFirstViewActive: Bool = true
    
    var body: some View {
        ZStack {
            if isFirstViewActive {
                FirstView()
                    .transition(.slide) // 添加过渡动画
            } else {
                SecondView()
                    .transition(.slide)
            }
        }
        .onChange(of: isFirstViewActive) { _ in
            withAnimation {} // 状态变更时触发动画
        }
    }
}

// 子视图无需再用withAnimation包裹赋值
struct FirstView: View {
    @AppStorage("firstViewActive") var isFirstViewActive: Bool = true
    
    var body: some View {
        ZStack {
            Color.red.ignoresSafeArea()
            VStack {
                Spacer()
                Text("This is the first view")
                Spacer()
                Button {
                    isFirstViewActive = false
                } label: {
                    Text("Go to second view")
                }
                Spacer()
            }
        }
    }
}

struct SecondView: View {
    @AppStorage("firstViewActive") var isFirstViewActive: Bool = false
    
    var body: some View {
        ZStack {
            Color.blue.ignoresSafeArea()
            VStack {
                Spacer()
                Text("This is the second view")
                Spacer()
                Button {
                    isFirstViewActive = true
                } label: {
                    Text("Go to first view")
                }
                Spacer()
            }
        }
    }
}

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