NavigationUI中的SwiftUI自定义动画过渡?

时间:2019-12-10 16:01:07

标签: 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}
        }
    }
}

显示视图时工作正确。通过在3秒内将不透明度更改为1.0来淡入。都好。但是,当单击NavigationLink进入视图B时,它会滑移该视图,并且视图B(具有相同的逻辑)会慢慢淡入。我猜这是因为onDisappear实际上是在视图消失时触发的,而不是在视图要移开时触发的。

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

我正在使用Xcode 11.2.1

1 个答案:

答案 0 :(得分:1)

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

我需要更改不透明度,但是我无法使用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}
            }
        }

    }
}

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

希望有帮助!