Animation in SwiftUI using animation() modifier

SwiftUI makes it easy for iOS developers to add animation effects to a view. The built-in animation() modifier has the ability to make changes to views with animation effects.

You are just going to love it after you learn how simple it is to give animation effects in SwiftUI views. At the end of this tutorial, you will realize how much effort Apple gives for making things simple for its developers in the ecosystem.

Today in this tutorial, you are going to learn how to implement animations in SwiftUI views using the animation() modifier.

In order to use the modifier, you have to place it after the other modifier of the views and then mention the animation type. Also, you have to attach it to a value so that the animation triggers when there is any change made to the value.

Scale animation

In our first example, we are going to create a button and scale it with an animation effect. Taping the button will increase the scale by 1. Every time the user taps the button it will increase the scale amount then the previously increased value.

Below is an example that shows how you can do it in SwiftUI:

  
    @State private var scaleAmount = 1.0

    var body: some View {
        
        Button("Press to scale up") {
            scaleAmount += 1
        }
        .scaleEffect(scaleAmount)
        .animation(.easeIn(duration: 1), value: scaleAmount)
        
        
    }

It will create an animation effect as you can see below when a user taps the button:

In the above piece of code, we have started a state variable scaleAmount with the value 1.0. 1 is the default scale of a view.

Then we created a button. In the button action, we increase the value of the state variable scaleAmount by 1.

In our example, we are animating the scale effect to start it from slower to faster. We have set the animation style to easeIn with the duration to 1 second:

...
.animation(.easeIn(duration: 1), value: scaleAmount)

However, you it is not required to give a specific time. You can just leave it:

...
.animation(.easeIn, value: scaleAmount)

You can see that we have attached the scaleAmount state variable to the animation() modifier. In this way, whenever the value of this state variable changes, the button will increase its size by 1. In our case, we are increasing the variable when the button is tapped. Thus tapping the button scales up its size by 1.

Rotation

You can create some other types of animations using the SwiftUI animation() modifier. Using this modifier, you can perform rotation, opacity, changing border size and much more…

Below is an example where we are rotating a button by a 30-degree angle whenever we tap it:

    @State private var rotateAngle = 0.0

    var body: some View {
        
        
        Button("Press to rotate") {
            rotateAngle += 30
        }
        .rotationEffect(.degrees(rotateAngle))
        .animation(.easeIn, value: rotateAngle)
        
        
    }

In the above example, we haven’t set the duration. If you don’t provide a duration, the default one is 0.35 seconds. Below is how the user will experience for the above code:

Change border thickness with animation effect

If you change the border width by tapping a button without animation() modifier, it will change it immediately without any animation effect. But providing the modifier will automatically make this change in an animating effect.

Below is given the example:

    @State private var borderAmount = 1.0

    var body: some View {
        
        Button("Press to scale up") {
            borderAmount += 4
        }
        .padding()
        .border(.red, width: borderAmount)
        .animation(.easeIn(duration: 1), value: borderAmount)
        
    }

Below is the result for the above code on an Apple device:

By Faruque Ahamed Mollick