Make circular animation work in both direction in SwiftUI

In this tutorial, we will see how to make a circular animation work in both directions in SwiftUI.

We can create a circular animation that works in both directions in SwiftUI by using the rotationEffect and withAnimation modifier.

We can use the rotationEffect modifier to apply a rotation to a view and the withAnimation function animate changes to the view’s properties within its closure.

We can create an interactive circular animation by combining these modifiers, that alternate between clockwise and anti-clockwise rotations.

Using onAppear method

We can create a circular animation that works in both directions using the onAppear method. So, when the view appears it will rotate in both directions automatically.

Example

import SwiftUI

struct ContentView: View {
    // State variable to control the animation
    @State private var isAnimating = false

    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .frame(width: 150, height: 150)
            .foregroundColor(.mint)
            // Rotate the rectangle based on the state variable isAnimating
            .rotationEffect(.degrees(isAnimating ? 360 : 0))
            .onAppear {
                // When the view appears, start an animation
                withAnimation(Animation.linear(duration: 2).repeatForever(autoreverses: true)) {
                    // Toggle the state variable to change the rotation direction
                    self.isAnimating.toggle()
                }
            }
    }
}

The above code will create a rounded rectangle that will continuously rotate in both directions (clockwise and anti-clockwise) using the rotationEffect and withAnimation within the onAppear modifier.

We can adjust the duration or animation style as per our requirements.

Output:

Using the onTapGesture

Now, if we want to trigger the circular animation on a tap gesture, we can use the onTapGesture modifier along with withAnimation.

We can simply do that by embedding the WithAnimation into the onTapGesture.

Example

import SwiftUI

struct ContentView: View {
    // State variable to control the animation
    @State private var isAnimating = false

    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .frame(width: 150, height: 150)
            .foregroundColor(.mint)
            // Rotate the rectangle based on the state variable isAnimating
            .rotationEffect(.degrees(isAnimating ? 360 : 0))
            .onTapGesture {
                // When the view is tapped, start an animation
                withAnimation(Animation.linear(duration: 3).repeatForever(autoreverses: true)) {
                    // Toggle the state variable to change the rotation direction
                    self.isAnimating.toggle()
                }
            }
    }
}

The above code will create a rounded rectangle that will rotate continuously when tapped in both clockwise and anti-clockwise directions using the rotationEffect and withAnimation within the onTapGesture modifier.

Output:

Change the rotation direction on click

We can rotate the circle in one direction when we tap the shape and then reverse the rotation when tapped again.

We can simply do that by using the conditional statement within the WithAnimation function.

Example

import SwiftUI

struct ContentView: View {
    // State variable to track the current rotation in degrees
    @State private var rotationDegrees: Double = 0
    
    // State variable to determine the rotation direction
    @State private var isClockwise = true

    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .frame(width: 150, height: 150)
            .foregroundColor(.mint)
            // Apply the rotation to the RoundedRectangle based on the rotationDegrees state
            .rotationEffect(.degrees(rotationDegrees))
            .onTapGesture {
                // Animate the rotation change with a linear animation lasting 3 seconds
                withAnimation(Animation.linear(duration: 3)) {
                    // Check the current direction and rotate accordingly
                    if isClockwise {
                        rotationDegrees += 360 // Rotate clockwise by adding 360 degrees
                    } else {
                        rotationDegrees -= 360 // Rotate counterclockwise by subtracting 360 degrees
                    }
                    isClockwise.toggle() // Toggle the rotation direction for the next tap
                }
            }
    }
}

The above code will create a RoundedRectangle that will rotate clockwise when we tap the RoundedRectangle and then reverse the rotation direction when we tap again.

Output: