SwiftUI 中的动态转换

问题描述

我希望能够根据状态转换使用不同的转换。例如，如果我从 .one => .three 开始，我想在删除时淡出 ViewOne。如果我从 .one => .two 开始，我想在删除时将 ViewOne 向左移动。现在我有这样的东西（显然，它只适用于从 .one => .two 的转换）：

ZStack {
    if state == .one {
        ViewOne()
            .transition(.asymmetric(insertion: .move(edge: .trailing),removal: .move(edge: .leading)))
    }

    if state == .two {
        ViewTwo()
            .transition(.asymmetric(insertion: .move(edge: .trailing),removal: .move(edge: .leading)))
    }

    if state == .three {
        ViewThree()
            .transition(.asymmetric(insertion: .opacity,removal: .identity))
    }
}

如何根据状态动态更改转换？

更新： 这是一个更完整的示例：

enum Screen {
    case susi,onboarding,home
}

struct ContentView: View {
    @State var screen: Screen = .susi
    @State var transition: AnyTransition = .asymmetric(insertion: .identity,removal: .move(edge: .leading))
    
    var body: some View {
        ZStack {
            if screen == .susi {
                ViewOne()
                    .transition(transition)

            }
            if screen == .onboarding {
                ViewTwo()
                    .transition(.asymmetric(insertion: .move(edge: .trailing),removal: .move(edge: .leading)))
            }
            if screen == .home {
                ViewThree()
                    .transition(.asymmetric(insertion: .opacity,removal: .identity))
            }
        }
        .onAppear {
            dispatchQueue.main.asyncAfter(deadline: .Now() + 5) {
                withAnimation(.default) {
                    self.transition = .asymmetric(insertion: .identity,removal: .opacity)
                    self.screen = .home
                }
            }
        }
    }
}

解决方法

对于那些遇到相同问题的读者，一种解决方案是切换视图的 id 属性。围绕 SO 进行的一些搜索使我采用了这种技术，它显然会重置视图的动画。

import SwiftUI

enum Screen {
    case susi,onboarding,home
}

struct ContentView: View {
    @State var screen: Screen = .susi
    @State var transition: AnyTransition = .move(edge: .leading)
    @State var viewId = UUID().uuidString
    
    var body: some View {
        ZStack {
            if screen == .susi {
                ViewOne()
                    .transition(transition)

            }
            if screen == .onboarding {
                ViewTwo()
                    .transition(.asymmetric(insertion: .move(edge: .trailing),removal: .move(edge: .trailing)))
            }
            if screen == .home {
                ViewThree()
                    .transition(.asymmetric(insertion: .opacity,removal: .move(edge: .bottom)))
            }
        }
        .id(viewId)
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
                withAnimation(.default) {
                    self.screen = .onboarding
                }
                
                DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
                    withAnimation(.default) {
                        self.screen = .susi
                    }
                    
                    DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
                        self.transition = .opacity
                        self.viewId = UUID().uuidString
                        
                        withAnimation(.default) {
                            self.screen = .home
                        }
                        
                        DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
                            self.transition = .move(edge: .top)
                            self.viewId = UUID().uuidString
                            
                            withAnimation(.default) {
                                self.screen = .susi
                            }
                            
                            DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
                                self.transition = .move(edge: .leading)
                                self.viewId = UUID().uuidString
                                
                                withAnimation(.default) {
                                    self.screen = .onboarding
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

我最终修改了 id 的 ViewOne 而不是整个 ZStack，因为担心这样做会在未来产生一些意想不到的 SwiftUI 怪癖。相同的技术，只是将其应用于不同的视图。