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

I’ve 3 photos all in numerous placements in a circle. I need the photographs to rotate across the circle in a clockwise course whereas staying upright on the display screen throughout their total journey across the circle. In my code under, they’re shifting in a clockwise course, 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 photographs keep upright relative to the display screen? Additionally if anybody recommends attempting the counter rotation, strive including a ‘-‘ signal to my rotation angle variable and you may 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: .middle)

                // 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: .middle)

                // 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: .middle)
            }
            .padding(.horizontal)
            
            Spacer()
        }
        .onAppear {
            withAnimation(Animation.linear(length: 8).repeatForever(autoreverses: false)) {
                rotationAngle += 360
            }
        }
    }
}

#Preview{
        AnotherCircleTry()
}