web-dev-qa-db-fra.com

Transition animée personnalisée SwiftUI dans navigationView?

existe-t-il un moyen dans SwiftUI de changer le comportement standard de NavigationView/NavigationLink, qui consiste à passer d'une vue à l'autre? J'aimerais avoir une animation/transition personnalisée comme un fondu entrant/sortant.

J'essaye les choses depuis un moment maintenant et j'en ai résolu la moitié, mais j'ai du mal avec la seconde moitié. Ce code:

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

Fonctionne correctement lorsque la vue apparaît. Il apparaît en changeant l'opacité à 1.0 en 3 secondes. Tout bon. Mais lorsque vous cliquez sur NavigationLink, pour accéder à la vue B, il fait glisser cette vue et la vue B (qui a la même logique) apparaît lentement. Je suppose que c'est parce que onDisappear est réellement déclenché lorsque la vue a disparu, pas lorsqu'elle est sur le point de s'éloigner.

Y a-t-il des chances de dire à SwiftUI de ne pas glisser ou glisser mais de faire une animation/transition personnalisée?

J'utilise Xcode 11.2.1

swiftuiswiftui-navigationlink
5
jboi

C'est un peu tard, mais je viens de rencontrer ce problème et peut-être que ma solution aidera quelqu'un d'autre qui a cela.

Je devais changer l'opacité, mais je ne pouvais pas le faire avec un NavLink, alors j'ai fait quelque chose comme ceci:

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

    }
}

L'idée est que lorsque le bouton est enfoncé (ou chaque fois que les calculs que vous devez faire sont effectués), vous pouvez simuler une transition en utilisant une structure if-else {}.

J'espère que cela pourra aider!

1
Evan