SwiftUI Rotation Animation: Bringing Your App to Life

SwiftUI is a powerful framework for building user interfaces in iOS apps. One of the many features it offers is the ability to create animations easily, including rotation animations. In this post, we will explore how to use SwiftUI rotation animation, as well as some use cases and examples.

What is SwiftUI rotation animation?

Rotation animation is a way to animate an object by rotating it around a fixed point. SwiftUI provides a built-in rotation effect that can be animated using the withAnimation function. The rotationEffect modifier is used to rotate a view by a specified angle.

How to use SwiftUI rotation animation

Here’s an example of how to use SwiftUI’s rotation animation to create a spinning wheel.

In the following example, we will define a state variable called isSpinning that determines whether the wheel is spinning or not. We use the rotationEffect modifier to rotate the image by 360 degrees if isSpinning is true. We also apply the animation modifier to specify the animation type and duration, and the onAppear modifier to start the animation when the view appears. And last we add a button that toggles the isSpinning variable:

struct SpinningWheel: View {
 @State var isSpinning = false
    
    var body: some View {
        Button {
            isSpinning.toggle()
        }label: {
            Text("Spin me")
        }
        Image(systemName: "arrow.clockwise")
            .font(.system(size: 80))
            .foregroundColor(.blue)
            .rotationEffect(.degrees(isSpinning ? 360 : 0))
            .animation(.easeInOut(duration: 1), value: isSpinning)
    }
}

Which will produce the following result:

Loading indicators using rotation animation

A loading indicator is a common use case for rotation animation. By rotating an image or icon, you can create the illusion of a spinning wheel or circle, indicating that the app is loading or processing data. Here’s an example of a loading indicator using SwiftUI’s rotation animation:

struct LoadingContent: View {
      @State var degreesRotating = 0.0
    
      var body: some View {
        
      Image(systemName: "fanblades")
          .font(.system(size: 80))
          .foregroundColor(.blue)
          .rotationEffect(.degrees(degreesRotating))
        
          .onAppear {
              withAnimation(.linear(duration: 1)
                  .speed(0.1).repeatForever(autoreverses: false)) {
                      degreesRotating = 360.0
                  }
          }
    }
}

In this example, we use the repeatForever function to loop the animation indefinitely, and the autoreverses parameter to prevent the animation from reversing direction.

The code above will produce the following view:

Rotation animation roundup

With SwiftUI’s rotation animation capabilities, you have the tools to breathe life into your app and create visually stunning experiences for your users. From simple loading indicators to complex interactive gestures, rotation animations can add that extra touch of magic. So go ahead, experiment, and let your creativity soar as you embark on your journey to master SwiftUI rotation animations.

Scroll to Top