SwiftUI Animation from screen bottom not working properly

Question

I'm trying to create an animation of a View coming into the screen from the bottom. But in the very first time it only appears on screen without any animation and then it starts work properly.

This is the code:

struct ContentView: View {
@State private var showView = false
var body: some View {
    ZStack(alignment: .bottom){
        VStack{
            Button("TAP HERE") {
                withAnimation(.spring()) {
                    showView.toggle()
                }
            }
            Spacer()
        }
        if showView {
            RoundedRectangle(cornerRadius: 30)
                .frame(height: UIScreen.main.bounds.height * 0.5)
                .transition(.move(edge: .bottom))
        }
    }
    .edgesIgnoringSafeArea(.bottom)
}

}

This is the behavior:

What I'm doing wrong?

I'm using Xcode 14 beta 5 and Swift 5

Did you try to add a duration to the animation ? May be the first time the computing of the view take more time than animation default duration. — Ptit Xav, Aug 25 '22 at 15:47
Nothing wrong with your code. Just run it on the simulator or real device. — Aaron Bratcher, Oct 18 '22 at 16:40

score 1 · Answer 1 · answered Jan 05 '23 at 19:13

1

try this:

if showView {
      RoundedRectangle(cornerRadius: 30)
          .frame(height: UIScreen.main.bounds.height * 0.5)
          .transition(.move(edge: .bottom))
          .zIndex(1) <-- here
}

answered Jan 05 '23 at 19:13

wuz-good

11
1

score 0 · Answer 2 · answered Aug 25 '22 at 17:38

Actually, i think that you just need to move the spring effect to the RoundedRectangle.

struct ContentView: View {
    @State private var showView = false
    var body: some View {
        ZStack(alignment: .bottom){
                VStack{
                    Button("TAP HERE") {
                        withAnimation {
                            showView.toggle()
                        }
                    }
                    Spacer()
                }
                if showView {
                    RoundedRectangle(cornerRadius: 30)
                        .frame(height: UIScreen.main.bounds.height * 0.5)
                        .transition(.move(edge: .bottom))
                        .animation(.spring(), value: showView)
                }
            }
            .edgesIgnoringSafeArea(.bottom)
    }
}

In Xcode the animation is a little strange, but in the simulator it works ok.

score 0 · Answer 3 · answered Mar 28 '23 at 09:24

It does not work the first time because the SwiftUI view must be created before executing the animation. It means that every animated view cannot be created like that:

if conditions
   show view

Instead, your code should look like this:

 ZStack(alignment: .bottom){
        VStack{
            Button("TAP HERE") {
                withAnimation(.spring()) {
                    showView.toggle()
                }
            }
            Spacer()
        }
        RoundedRectangle(cornerRadius: 30)
            .frame(height: UIScreen.main.bounds.height * 0.5)
            .transition(.move(edge: .bottom))
            .offset(y: showView ? 0 : UIScreen.main.bounds.height * 0.5)
    }

SwiftUI Animation from screen bottom not working properly

3 Answers3