带有 switch 语句的 SwiftUI 动画

Question

我了解简单动画在 SwiftUI 中的工作原理。但是，我有一个稍微复杂的 watchOS 应用程序。视图状态由switch 语句处理：

struct ContentView: View {
    @EnvironmentObject private var state: AppState

    @State private var selection = 1

    var body: some View {
        Group {
            switch state.view {
            case .start:
                TabView(selection: $selection) {
                    ActivityView()
                        .tag(0)
                    StartView()
                        .tag(1)
                    SettingsView()
                        .tag(2)
                }
            case .workout:
                TabView(selection: $selection) {
                    TakeoffControlView()
                        .tag(0)
                    TakeoffView()
                        .tag(1)
                }
            }

            // ...
        }
    }
}

在另一个视图中我编辑视图状态：

struct StartView: View {
    @EnvironmentObject private var state: AppState

    var body: some View {
        Button(action: {
            state.view = .workout
        }, label: {
            Text("Start")
        })
    }
}

如何添加动画以在不同情况之间进行转换？我尝试向Group、TabView 和单个视图添加动画但没有成功。显然我在withAnimation 中包装了状态更改。但是，我无法使其工作。任何想法如何使这项工作？

Answer 1

.transition() 只是定义什么是过渡，要获得预期的过渡动画，您必须在 withAnimation() { ... } 块内对 SourceOfTruth 进行更改。

struct ContentView: View {
    @EnvironmentObject private var state: AppState

    @State private var selection = 1

    var body: some View {
        Group {
            switch state.view {
            case .start:
                TabView(selection: $selection) {
                    ActivityView()
                        .tag(0)
                    StartView()
                        .tag(1)
                    SettingsView()
                        .tag(2)
                }
                .transition(.slide)//<- here
                
            case .workout:
                TabView(selection: $selection) {
                    TakeoffControlView()
                        .tag(0)
                    TakeoffView()
                        .tag(1)
                }
                .transition(.slide)//<- here
            }

            // ...
        }
    }
}

struct StartView: View {
    @EnvironmentObject private var state: AppState

    var body: some View {
        Button(action: {
            withAnimation(.easeIn) {  //<- here
                state.view = .workout
            }
        }, label: {
            Text("Start")
        })
    }
}