SwiftUI Rotation Anchor Point Tutorial

In SwiftUI the rotationEffect method will rotate the view around a specific point which is called the anchor point. By default the anchor point is set to the the center point, but can be modified. In this tutorial some rectangles will be rotated at a different anchor point. This tutorial is built for iOS14 and Xcode 12, which can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Enter SwiftUIRotationAnchorPointTutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbos and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Add a custom view modifier struct which will be used to set the modifiers for the rounded rectangles in the content view.

struct CustomRectangle: ViewModifier {
    var overlayText = "example"
    
    func body(content: Content) -> some View {
        return content
            .overlay(Text(overlayText).foregroundColor(.white))
            .frame(width: 75, height: 75)
            .foregroundColor(Color.red)
    }
}

The overlay text property can be changed as parameter of the .modifier modifier. Change the code inside the ContentView struct to

struct ContentView: View {
    // 1.
    @State private var isAnimated = false
    
    var body: some View {
        VStack(spacing: 15) {
            
            // 2.
            Button("Change") {
                self.isAnimated.toggle()
            }
            
            
            HStack(spacing: 10) {
                RoundedRectangle(cornerRadius: 10)
                    // 3.
                    .modifier(CustomRectangle(overlayText: "top left"))
                    // 4.
                    .rotationEffect(Angle.degrees(isAnimated ? 90: 0), anchor: .topLeading)
                    .animation(.easeIn(duration: 0.5))
                
                RoundedRectangle(cornerRadius: 10)
                    .modifier(CustomRectangle(overlayText: "top right"))
                    .rotationEffect(Angle.degrees(isAnimated ? -90: 0), anchor: .topTrailing)
                    .animation(.easeIn(duration: 0.5))
            }
            
            HStack(spacing: 10){
                RoundedRectangle(cornerRadius: 10)
                    .modifier(CustomRectangle(overlayText: "bottom left"))
                    .rotationEffect(Angle.degrees(isAnimated ? 90: 0), anchor: .bottomLeading)
                    .animation(.easeIn(duration: 0.5))
                
                RoundedRectangle(cornerRadius: 10)
                    .modifier(CustomRectangle(overlayText: "bottom right"))
                    .rotationEffect(Angle.degrees(isAnimated ? -90: 0), anchor: .bottomTrailing)
                    .animation(.easeIn(duration: 0.5))
            }
            
            Spacer()
        }
    }
}

1. The State property is declared to set the state of the animation.

2. The button will change the state of the isAnimated property

3. The custom modifier is used with a custom text as overlay text.

4. The top leading anchor point is used to rotate the rectangle.

The rotationEffect modifier will rotate the rectangles by changing the degrees of the Angle according to the state of the isAnimated property. The anchor parameter is set to the point at which the rectangle rotates. Go to the Preview and select the Live Preview button.

Click the Change button to see the rotation at different anchor point in action.

The source code of the SwiftUIRotationAnchorPointTutorial can be downloaded at the ioscreator repository on Github.