Transition animation between views in SwiftUI

In this SwiftUI tutorial, we’ll learn how we can change views with a transition animation. The simplest way of doing this is using withAnimation closure. We can call any view inside withAnimation closure and it will present the view with a slight animation. We can also use animation and transition modifiers of SwiftUI for giving our different transition effects.

what this blog will cover:

• transition modifier
• animation modifier

Let’s see how we use the animation and the transition modifier of SwiftUI.

struct ContentView:View{
    
    @State var show: Bool = false
    var body: some View {
        ZStack () {
            
            Button("Show rect"){
               show.toggle()
            }
            
            VStack{
                if show {
                        myImageView()
                }
            }
        }
    }
}

• ZStack allows having many cards on top of each other.

This is the initial code of our contentView, the main view of the app, we have embedded our code inside a ZStack so that the new view will appear in front of the current view.  We have declared a state variable show and we are changing its state on a button click.

We have bound our new view, myImageView, with this state variable. So when the state of this variable changes the new view will appear on the screen.

struct myImageView:View{
    var body: some View{
        Image("dark_background")
            .resizable()
            .frame(maxWidth: .infinity,maxHeight: .infinity)
            .edgesIgnoringSafeArea(.all)
    }
}

This is a code of myImageView, Here we are simply showing an image that will cover the entire screen. So our new view is simply an image view.

Now let’s add some animation to our views.

struct ContentView:View{
    
    @State var isShowingRect: Bool = false
    var body: some View {
        ZStack () {
            
            Button("Show rect"){
                isShowingRect.toggle()
            }
            
            VStack{
                if isShowingRect {
                        myImageView()
                }
            }
            .animation(.easeIn)
        }
    }
}

• animation(.easeIn), creates a simple fade-in and fade-out animation. There are other options as well that we can choose i.e. easeOut, easeInOut, etc.

If we want to customize this transition we need to have to place a transition modifier of SwiftUI on the view we are calling.

struct ContentView:View{
    
    @State var isShowingRect: Bool = false
    var body: some View {
        ZStack () {
            
            Button("Show Image"){
                isShowingRect.toggle()
            }
            
            VStack{
                if isShowingRect {
                        myImageView()
                        .transition(.slide)
                }
            }
            .animation(.easeIn)
        }
    }
}

• The transition modifier of SwiftUI only works with the animation modifier. So you must have to call the animation modifier in order to use the transition modifier.