ios - 带有 switch 语句的 SwiftUI 动画

Question

我了解简单动画在 SwiftUI 中的工作原理。但是，我有一个稍微复杂的 watchOS 应用程序。 View 状态由 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)
                }
            }

            // ...
        }
    }
}

在另一个 View 中我编辑 View 状态:

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

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

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

Answer 1

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

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")
        })
    }
}