SwiftUI animation 帶switch語句

Question

我了解簡單動畫在 SwiftUI 中的工作原理。 但是，我有一個稍微復雜的 watchOS 應用程序。 查看 state 由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)
                }
            }

            // ...
        }
    }
}

在另一個視圖中，我編輯視圖 state：

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

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

如何添加動畫以在不同情況之間轉換？ 我嘗試將 animation 添加到Group 、 TabView和單個視圖但沒有成功。 顯然，我將 state 更改包裝在withAnimation中。 但是，我無法使其工作。 任何想法如何使這項工作？

Answer 1

.transition()只是定義過渡是什么，並且要獲得預期的過渡 animation，您必須在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")
        })
    }
}