Mastering Animations and Transitions in SwiftUI

Image by vectorjuice on Freepik

SwiftUI, Apple’s innovative framework for building user interfaces across all Apple platforms provides an effortless way to create smooth animations and transitions. In this article, we’ll explore how to make the most of these features to enhance the user experience of your apps.

Animations are an integral part of modern UI/UX design. They bring life to your apps, making the interface more intuitive and engaging. SwiftUI enables you to animate changes in your views, such as size, position, color, and more.

Transitions, on the other hand, control how views appear and disappear when they’re added or removed from the view hierarchy. SwiftUI allows you to create custom transitions that dictate how these views come and go.

Animations

In SwiftUI, creating animations is as simple as attaching the .animation(_:value:) modifier to a view. Where value is the changing state that we want to animate.
Let's start by creating a simple animation that increases the size of a button when it's tapped.

struct GrowingButton: View {
  @State private var isButtonPressed = false
  
  var body: some View {
    Button("Tap me") {
      self.isButtonPressed.toggle()
    }
    .padding()
    .scaleEffect(isButtonPressed ? 1.5 : 1.0)
    .animation(.easeInOut, value: isButtonPressed)
  }
}

In the code above, we have a Button that toggles isButtonPressed when tapped. We use .scaleEffect() to increase the size of the button when isButtonPressed is true.
The .animation(.easeInOut, value: isButtonPressed) modifier applies the animation to the scale effect. The easeInOut timing curve causes the animation to start slowly, speed up, then slow down at the end. and the value: isButtonPressed makes sure that the animation follows this state.

Basic animation

SwiftUI provides various options to customize your animations. Let’s modify our button to bounce when it’s pressed. We can achieve this by using a spring animation.

Button("Tap me") {
  self.isButtonPressed.toggle()
}
.padding()
.scaleEffect(isButtonPressed ? 1.5 : 1.0)
.animation(.interpolatingSpring(stiffness: 50, damping: 1),
           value: isButtonPressed)

The .interpolatingSpring(stiffness:damping:) animation makes the button bounce like a spring. Adjusting the stiffness and damping parameters changes the characteristics of the bounce.

Custom animation

SwiftUI also allows you to animate multiple properties simultaneously. For example, let’s animate the button’s size “and” color. In addition, let’s make this animation a little more realistic by changing the stiffness and the damping of the interpolatingSpring animation.

Button("Tap me") {
  self.isButtonPressed.toggle()
}
.padding()
.background(isButtonPressed ? Color.white : Color.black)
.scaleEffect(isButtonPressed ? 1.5 : 1.0)
.animation(.interpolatingSpring(stiffness: 150, damping: 7),
           value: isButtonPressed)

Now, when the button is tapped, it will grow in size and its color will transition from black to white.

Transitions

Transitions control how views appear and disappear. By default, views simply pop in and out of existence. However, SwiftUI allows you to apply custom transitions using the .transition() modifier.

Let’s create a Text view that slides in from the right when it appears and slides out to the left when it disappears.

struct SlidingText: View {
  @State private var isTextVisible = false
  
  var body: some View{
    VStack {
      Button("Toggle Text") {
        withAnimation {
          self.isTextVisible.toggle()
        }
      }
      if isTextVisible {
        Text("Hello, SwiftUI!")
          .transition(.move(edge: .trailing))
      }
    }
  }
}

In the code above, we use the .move(edge:) transition, which slides the view in from or out to a specific edge of the screen. We use withAnimation to apply the transition animation when isTextVisible changes.

Conclusion

Animations and transitions are crucial for creating a compelling user interface. SwiftUI’s declarative syntax makes it easy to add these elements to your app. With these tools at your disposal, you can create beautiful, dynamic interfaces that delight your users.

As always, the best way to learn is by doing. I encourage you to play around with these modifiers and see what exciting animations and transitions you can create. Happy coding!