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

I’ve 3 pictures all in several placements in a circle. I would like the photographs to rotate across the circle in a clockwise path whereas staying upright on the display throughout their complete journey across the circle. In my code beneath, they’re shifting in a clockwise path, however aren’t staying upright as they transfer across the perimeter relative to the display. 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? Additionally if anybody recommends making an attempt the counter rotation, strive including a ‘-‘ signal to my rotation angle variable and you may see it simply strikes counterclockwise as an alternative.

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 pictures!")
            Spacer()

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

                // Picture 1
                Picture("image-1")
                    .resizable()
                    .body(width: 50, top: 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, top: 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, top: 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()
}