SwiftUI custom animated transition in navigationView?

Question

is there a way in SwiftUI to change the standard behaviour of NavigationView/NavigationLink, which is to slide from one view to the next? I'd like to have a custom animation/transition like fade in/out.

I'm trying out things for a while now and solved half of it but struggling with the second half. This 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}
        }
    }
}

Works correct when the view appears. It fades in by changing opacity to 1.0 within 3 seconds. All good. But when clicking the NavigationLink, to go to View B, it slides away this view and View B (which has the same logic) fades in slowly. I guess this is because onDisappear is actually triggered when the view is gone, not when it is about to move away.

Are there any chances to tell SwiftUI to not swipe or slide but do a custom animation/transition?

I'm using Xcode 11.2.1

Tasteful

For now there is not official way to customise standard NavigationView animation, but it is possible to create custom navigation. You might find helpful the approach I provided in this post. There were requested slide animation there, but actually it can be repacked with any one. – Ibnsaud

Hi @Asperi, the approach in your linked post is what I used as a workaround. I created my own NavigationView - very close to the way you provided there. – Tasteful

Answer 1

This is a bit late but I just ran into this issue and maybe my solution will help someone else that has this.

I needed to change the opacity, but I couldn't do that with a NavLink, so I did something like this:

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

    }
}

The idea is that when the button is pressed (or whenever whatever calculations you need to do are performed), you can simulate a transition using an if-else{} structure.

Hope that helps!

Bannerol

For me the whole point of using navigation link is to prevent having views like this one. This view, if you want to expand it with a lot of other view will contain way too much information on the app's structure. So even if this is a working compromise it won't help most people who decided to use navigation views. – Isotron

Answer 2

This is the advertisement of the 3rd party library NavigationTransitions

It is easy to use or even enables custom animations;

NavigationStack {
  // ...
}
.navigationTransition(.slide)

It is usage similar to SwiftUI animations, enables combination

.navigationTransition(
    .slide.combined(with: .fade(.in))
)

, and selection with logic;

.navigationTransition(
    reduceMotion ? .fade(.in).animation(.linear) : .slide(.vertical)
)

Custom Example;

struct Swing: NavigationTransition {
    var body: some NavigationTransition {
        Slide(axis: .horizontal)
        MirrorPush {
            let angle = 70.0
            let offset = 150.0
            OnInsertion {
                ZPosition(1)
                Rotate(.degrees(-angle))
                Offset(x: offset)
                Opacity()
                Scale(0.5)
            }
            OnRemoval {
                Rotate(.degrees(angle))
                Offset(x: -offset)
            }
        }
    }
}

---

I was relentlessly hoping to find a solution to the no-animation of the insertion on the navigation stack, unfortunately, this great library just replaces the animation, it doesn't add from start.

Co

no one cares about macos i see – Demolition