图像旋转动画会导致图像移动

Question

我希望图像旋转到位，但是我编写的代码使图像旋转，但也可以移动到视图中的新位置。我究竟做错了什么？我觉得我已经尝试了一切：

struct loadingView: View {
    @State private var spinArrow = false   // Spinning Motion
    @State private var dismissArrow = false   // Opacity 1 - 0
    @State private var displayBorder = false   // StrokeBorder (lineWidth) 64 - 5
    @State private var displayCheckmark = false  // Trimpath from 1 - 0

    var body: some View {
                ZStack {
                    Image("arrowtocircle").resizable()
                        .frame(width:50, height: 50)
                        .rotationEffect(.degrees(spinArrow ? 720 : -360))
                        .animation(Animation.easeInOut(duration: 2))
                        .onAppear() {
                            self.spinArrow.toggle()
                        }

                 }.frame(width: 500, height:500)
    }
}