Animating Views in SwiftUI using State Variables - A Guide to Understanding Animation States in SwiftUI

In this tutorial, we'll go through how animation works in SwiftUI. Animations in SwiftUI are automatically responsive, interruptible and automatic. 

There is virtually no set up — only customizations. Transitions are like Magic Move. 

You only need to set the states and SwiftUI will figure out for you the transition between the two states.

Animations are an amazing addition to any project. 

Animation State  

Just like in React, you have animation states in SwiftUI as well. In this case, let's declare a Boolean that will toggle from true and false and vice versa.

@State var show = false

..

Action with Toggle  

• Your animation can start with the tap of an event. We'll need to add a Tap event to the front card. 
• You can use the toggle() function to switch a Bool from true to false, and vice versa.

.onTapGesture {
    show.toggle()
}

..

Change State  

• We can change the state on most values in our UI, such as position, size, color, etc — as long as the values remain the same type. 
• Using the condition asking, if show state is true, then apply 320, else apply 300.

.frame(width: show ? 320 : 300, height: show ? 600 : 44)

..

Apply Animation  

• You can use one of the preset animation types: linear, easeIn, easeOut, easeInOut and spring. 
• If you want more options, you can look at the full documentation.

withAnimation(.spring()) {
	show.toggle()
}

..

Final Output  

In this sample layout, we're turning a button into a modal card. Feel free to play around with the UI. 

@State var show = false

var body: some View {
    VStack {
        Text("View more")
            .bold()
            .foregroundColor(.white)
    }
    .frame(width: show ? 320 : 300, height: show ? 600 : 44)
    .background(Color.pink)
    .cornerRadius(30)
    .shadow(color: Color.pink.opacity(0.5), radius: 20)
    .onTapGesture {
        withAnimation(.spring()) {
            show.toggle()
        }
    }
}

..

..