导航视图中的SwiftUI自定义动画过渡?

jbo*_*boi 9 swiftui swiftui-navigationlink

SwiftUI 中是否有一种方法可以更改 NavigationView/NavigationLink 的标准行为,即从一个视图滑动到下一个视图?我想要一个自定义动画/过渡,如淡入/淡出。

我现在尝试了一段时间并解决了一半,但在后半部分苦苦挣扎。这段代码:

struct ContentView: View {
    @State var appeared: Double = 0.0

    var body: some View {
        NavigationView {
            VStack {
                Text("\(appeared)")
                NavigationLink(destination: ViewB()) {Text("go to View B")}
            }
            .opacity(appeared)
            .animation(Animation.easeInOut(duration: 3.0), value: appeared)
            .onAppear {self.appeared = 1.0}
            .onDisappear {self.appeared = 0.0}
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

视图出现时工作正常。它通过在 3 秒内将不透明度更改为 1.0 来淡入。都好。但是当单击NavigationLink, 转到视图 B 时,它会滑开此视图,并且视图 B(具有相同的逻辑)缓慢淡入。我想这是因为onDisappear实际上是在视图消失时触发,而不是在它即将离开时触发。

是否有机会告诉 SwiftUI 不要滑动或滑动,而是执行自定义动画/过渡?

我正在使用 Xcode 11.2.1

Eva*_*van 4

这有点晚了,但我刚刚遇到了这个问题,也许我的解决方案会帮助其他遇到这个问题的人。

我需要更改不透明度,但无法使用 NavLink 做到这一点,所以我做了如下操作:

struct example: View {
    @State var firstView = true
    @State var appeared: Double = 0
    var body: some View {
        VStack{
            if firstView{
                VStack{
                    Button(action: {
                        self.firstView = false
                    }){
                        Text("change view")
                    }
                }
            }
            else{
                VStack{
                    Text("Hello, World!")
                }
                .opacity(appeared)
                .animation(Animation.easeInOut(duration: 3.0), value: appeared)
                .onAppear {self.appeared = 1.0}
                .onDisappear {self.appeared = 0.0}
            }
        }

    }
}
Run Code Online (Sandbox Code Playgroud)

这个想法是,当按下按钮时(或者每当执行您需要执行的任何计算时),您可以使用 if-else{} 结构来模拟转换。

希望有帮助!

  • 对我来说,使用导航链接的全部目的是防止出现这样的视图。如果您想用许多其他视图扩展它,此视图将包含太多有关应用程序结构的信息。因此,即使这是一个有效的妥协,它也不会帮助大多数决定使用导航视图的人。 (18认同)