withAnimation in SwiftUI

Animations are an important part of modern app development. They can make your app more engaging, intuitive, and fun to use. SwiftUI, Apple's new declarative UI framework, provides a range of powerful tools for creating fluid and dynamic animations. In this blog post, we'll explore how SwiftUI withAnimation work and how you can use it in your own projects.

The code in this post is available here.

The basics of withAnimation

In SwiftUI, withAnimation is a function that takes a closure that contains the changes you want to animate. The closure can contain any kind of view manipulation, such as changing the position or opacity of a view.

Here's a simple example that shows how to animate a button when it's tapped:

struct ContentView: View {
    @State private var scale: CGFloat = 1.0

    var body: some View {
        Button("Tap me to enlarge!") {
            withAnimation {
                self.scale *= 1.5
            }
        }
        .scaleEffect(scale)
    }
}

In this example, we first declare a state property called scale, which is used to control the size of the button. When the button is tapped, we use withAnimation to animate the scale property. The scaleEffect modifier is then used to apply the scale factor to the button.

Compare the following three screenshots to see the animation:

1-Original

2-Tapped once

3-Tapped twice

Animating view transitions

One of the most common uses of animations in app development is to animate transitions between views. SwiftUI makes this task incredibly easy with its built-in support for view transitions.

To animate a view transition in SwiftUI, you simply need to use one of the built-in transition modifiers. There are several different transition modifiers to choose from, such as opacity, move, and scale.

Here's an example that shows how to animate a transition between two views:

struct ContentView2: View {
    @State private var showDetails = false

    var body: some View {
        VStack {
            Button((showDetails ? "Hide" : "Show") + " details") {
                withAnimation {
                    self.showDetails.toggle()
                }
            }
            if showDetails {
                Text("Here are some details")
                    .transition(.opacity)
            }
        }
    }
}

In this example, we use the showDetails state property to control whether the details view is shown or hidden. When the "Show details" button is tapped, we use withAnimation to animate the showDetails property. The details view is then shown or hidden using the if statement.

The transition modifier is used to animate the opacity of the details view. When the view appears or disappears, it fades in or out.

1. 

2. 

You can also replace the transition value .opacity to .scale, .slide or .identity to feel the different types of transition in the preview or the simulator.

Conclusion

Animations are an essential part of modern app development, and SwiftUI makes it easy to create fluid and dynamic animations. In this blog post, we've explored some of the basics of SwiftUI animations and how to use them to create engaging and intuitive user interfaces.

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!