Rotation Effect

Last updated on 22 Feb 2025.

Rotation Effect

Last updated on 22 Feb 2025.

Rotation Effect

Last updated on 22 Feb 2025.

Scroll Down

On this page

On this page

Getting Started

Rotation effect allows you to rotate a view around a specific point. By default, the point is the center but you can set the anchor point (see Going Further).

Using Rotation Effect

Using Degrees°

You can create a rotation effect supplying it with a rotation angle degree. The rotationEffect modifier can be attached to any View.

In the following example, a Text is rotated by 20°.

struct ContentView: View {
    var body: some View {
        Text("rotated.")
            .rotationEffect(.degrees(20))
    }
}

Using Radians

You can also use a radian value as the rotation angle.

In the following example, a Text is rotated by π/4 radians or 45°.

struct ContentView: View {
    var body: some View {
        Text("rotated.")
            .rotationEffect(.radians(.pi / 4))
    }
}

Going Further

Rotating with Anchors

The rotation can be anchored at a specific point. This makes the View rotate about that point. By default, the anchor is the center.

In the following example, when supplied with a .bottom anchor, the Capsule rotates around the bottom, while anchored to the bottom trailing edge to create a simple clock with a hand that rotates around the center.

There are nine different alignment options

  • topLeading: The top left edge for left-to-right languages like English, top right edge for right-to-left languages like Arabic

  • top: The top center edge

  • topTrailing: The top right edge for left-to-right languages like English, top left edge for right-to-left languages like Arabic

  • leading: The center left edge for left-to-right languages like English, center right edge for right-to-left languages like Arabic

  • center: The center

  • trailing: The center right edge for left-to-right languages like English, center left edge for right-to-left languages like Arabic

  • bottomLeading: The bottom left edge for left-to-right languages like English, bottom right edge for right-to-left languages like Arabic

  • bottom: The bottom center edge

  • bottomTrailing: The bottom right edge for left-to-right languages like English, bottom left edge for right-to-left languages like Arabic

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .top) {
            Circle()
                .fill(.blue.opacity(0.1))
            Capsule()
                .fill(.blue)
                .frame(width: 10, height: 100)
                .rotationEffect(.degrees(20), anchor: .bottom)
        }
        .frame(width: 200, height: 200)
    }
}

Custom Anchors

You can define a custom anchor if none of the pre-defined alignment-based anchors work for your needs. For example, if you want a view to be anchored 40% on the x axis and 10% on the y axis while rotating.

Do note that the axis starts from the top, 0, 0 is the top leading corner.

struct ContentView: View {
    var body: some View {
        Text("rotated.")
            .rotationEffect(.radians(.pi / 4), anchor: UnitPoint(x: 0.4, y: 0.1))
    }
}

Rotating with Animations

You can control the rotation with a State variable.

In the following example, when the Button is tapped, the Text will rotate.

struct ContentView: View {
    
    @State private var rotation: Angle = .degrees(0)
    
    var body: some View {
        Text("rotatable text.")
            .rotationEffect(rotation)
        
        Button("Rotate") {
            rotation = .degrees(20)
        }
    }
}

To animate the transition, you can wrap the State change in a withAnimation block.

To find out more about the various options to customize the animation speed, curve, and more, check out the withAnimation article.

struct ContentView: View {
    
    @State private var rotation: Angle = .degrees(0)
    
    var body: some View {
        Text("rotatable text.")
            .rotationEffect(rotation)
        
        Button("Rotate") {
            withAnimation {
                rotation = .degrees(20)
            }
        }
    }
}

Rotating Infinitely

Going back to the clock example, the hand of the clock can rotate infinitely by using the withAnimation block and setting it to repeat forever, with auto-reverse off. In the following example, every second, the hand makes a full revolution around the clock.

struct ContentView: View {
    
    @State private var rotation: Angle = .degrees(0)
    
    var body: some View {
        VStack {
            ZStack(alignment: .top) {
                Circle()
                    .fill(.blue.opacity(0.1))
                Capsule()
                    .fill(.blue)
                    .frame(width: 10, height: 100)
                    .rotationEffect(rotation, anchor: .bottom)
            }
            .frame(width: 200, height: 200)
            
            Button("Start Animating") {
                withAnimation(.linear(duration: 1).repeatForever(autoreverses: false)) {
                    rotation = .degrees(360)
                }
            }
        }
    }
}

In These Collections

This article can also be found in these collections.

© 2025 Tinkertanker Pte Ltd / Swift Accelerator. All rights reserved.

© 2025 Tinkertanker Pte Ltd / Swift Accelerator. All rights reserved.

© 2025 Tinkertanker Pte Ltd / Swift Accelerator. All rights reserved.