ios – Rotating photos round a circle in SwiftUI, preserve photos upright on display screen

I’ve 3 photos all in several placements in a circle. I would like the pictures to rotate across the circle in a clockwise route whereas staying upright on the display screen throughout their complete journey across the circle. In my code beneath, they’re shifting in a clockwise route, however aren’t staying upright as they transfer across the perimeter relative to the display screen. They’re staying upright across the circle relative to the center of the circle.

Does anybody understand how to make sure the pictures keep upright relative to the display screen? Additionally if anybody recommends attempting the counter rotation, attempt including a ‘-‘ signal to my rotation angle variable and you will see it simply strikes counterclockwise as a substitute.

Thanks and right here is my code:

import SwiftUI

struct AnotherCircleTry: View {
    @State non-public var rotationAngle = 0.0

    var physique: some View {
        VStack {
            Spacer()
            Textual content("Rotating photos!")
            Spacer()

            ZStack {
                Circle()
                    .stroke()
                    .body(width: 250, peak: 250)
                    .hidden()

                // Picture 1
                Picture("image-1")
                    .resizable()
                    .body(width: 50, peak: 50)
                    .clipShape(Circle())
                    .offset(x: cos(CGFloat(rotationAngle) / 180.0 * .pi) * 100,
                            y: sin(CGFloat(rotationAngle) / 180.0 * .pi) * 100)
                    .rotationEffect(.levels(rotationAngle), anchor: .heart)

                // Picture 2
                Picture("image-2")
                    .resizable()
                    .body(width: 50, peak: 50)
                    .clipShape(Circle())
                    .offset(x: cos(CGFloat(rotationAngle) / 180.0 * .pi) * 100,
                            y: sin(CGFloat(rotationAngle) / 180.0 * .pi) * 100)
                    .rotationEffect(.levels((rotationAngle + 120)), anchor: .heart)

                // Picture 3
                Picture("image-3")
                    .resizable()
                    .body(width: 50, peak: 50)
                    .clipShape(Circle())
                    .offset(x: cos(CGFloat(rotationAngle) / 180.0 * .pi) * 100,
                            y: sin(CGFloat(rotationAngle) / 180.0 * .pi) * 100)
                    .rotationEffect(.levels((rotationAngle + 240)), anchor: .heart)
            }
            .padding(.horizontal)
            
            Spacer()
        }
        .onAppear {
            withAnimation(Animation.linear(period: 8).repeatForever(autoreverses: false)) {
                rotationAngle += 360
            }
        }
    }
}

#Preview{
        AnotherCircleTry()
}