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)
                }
            }
        }
    }
}