Why does an animation in a NavigationView starts from the top left corner?

user_2425276 0
Viewed 1459

I'm trying to create a simple animation in SwiftUI and I would like the animation to start from center top and end to the center of the screen.
But, as you can see in the video, the animation starts from the top left corner when I use a NavigationView:
enter image description here

This is the code I am using for this example:

struct ContentView: View {
    
    @State var show = false
    
    var body: some View {
        NavigationView {
            HStack {
                Text("Hello, world!")
                    .padding()
                    .background(Color.blue)
                    .offset(x: 0, y: show ? 0 : -30)
                    .animation(Animation.easeOut.delay(0.6))
                    .onAppear {
                            self.show = true
                    }
                    .navigationTitle("Why?")
            }
        }
    }
}
swiftui animation
4 Answers

Why does an animation in a NavigationView starts from the top left corner?

Because implicit animation affects all animatable properties, including position, which on creation time is CGPoint.zero (ie. top-left corner).

Such cases are solved by linking animation to dependent state value, thus it activates only when state changed, so all animatable properties not affected.

Here is possible variant for your case. Tested with Xcode 12.1 / iOS 14.1.

struct ContentView: View {
    
    @State var show = false
    
    var body: some View {
        GeometryReader { gp in
            NavigationView {
                    HStack {
                         Text("Hello, world!")
                              .padding()
                              .background(Color.blue)
                              .offset(x: 0, y: show ? 0 : -gp.size.height / 2)
                              .animation(Animation.easeOut.delay(0.6), value: show)
                              .onAppear {
                                         self.show = true
                              }
                              .navigationTitle("Why?")
                    }
            }
        }
    }
}
user_122990300

So the solution is to use the value parameter on the animation and it works:

struct ContentView: View {
    
    @State var show = false
    
    var body: some View {
        NavigationView {
            HStack {
                Text("Hello, world!")
                    .padding()
                    .background(Color.blue)
                    .offset(x: 0, y: show ? 0 : -120)
                    .animation(Animation.easeOut.delay(0.6), value: show)
                    .onAppear {
                            self.show = true
                    }
                    .navigationTitle("Why?")
            }
        }
    }
}
user_24252760

You can wrap self.show = true with DispatchQueue.main.async. Like this:

.onAppear {
    DispatchQueue.main.async {
        self.show = true
    }
}
user_12689120

An easier solution in 5.6 for this is to use withAnimation:

struct ContentView: View {
    @State var offset = 0.0
    
    var body: some View {
        NavigationView {
            HStack {
                Text("Hello, world!")
                    .padding()
                    .background(Color.blue)
                    .offset(x: 0, y: offset)
                    .onAppear {

                        withAnimation(Animation.easeOut) { offset -= 120 }
                    }
                    .navigationTitle("Why?")
            }
        }
    }
}
user_4225780
Related