SwiftUI：不同方向的动画旋转

Question

乍一看，这个问题似乎很普通，但是经过几个小时尝试不同的技术后，我仍然无法达到预期的行为...我希望根据@State来控制View的旋转方向。如果视图处于默认位置（向上的箭头），则应从右侧向下旋转。如果箭头向下，则应从左侧向上旋转。

还有一件事我发现：在我的工作项目中，我使用了Image而不是SF Symbol，并进行了与代码示例相同的修改，但默认情况下它总是从右侧旋转，而使用SF Symbol则从左侧旋转。如果您能解释一下原因，我将不胜感激。

struct Arrow: View {
    @State var showView = false
    var body: some View {
        VStack {
            Image(systemName: "chevron.up.circle")
                .resizable()
                .frame(width: 50, height: 50)
                .rotationEffect(.degrees(showView ? 180 : 360))
                .animation(Animation.easeInOut(duration: 0.3), value: showView)
        }
        .onTapGesture { showView.toggle() }
    }
}

- Nizami

---

@TamásSengel，这个问题特别涉及到SwiftUI，而提出的重复问题并不适用。 - vacawama

Answer 1

为了始终以相同的方向旋转，动画过程中需保持一个“旋转角度 rotationAngle”始终递增（或始终递减）：

struct ContentView: View {
    @State private var showView = false
    @State private var rotationAngle: Double = 0
    
    var body: some View {
        VStack {
            Image(systemName: "chevron.up.circle")
                .resizable()
                .frame(width: 50, height: 50)
                .rotationEffect(Angle(degrees: rotationAngle))
            
        }
        .onTapGesture {
            showView.toggle()
            withAnimation(.easeInOut(duration: 0.3)) {
                rotationAngle += 180
            }
            rotationAngle = showView ? 180 : 0
        }
    }
}

注意：使用rotationAngle -= 180来向另一个方向旋转。

---

- vacawama

---

我尝试使用图像而不是SF符号，结果得到了相同的旋转方向。 - vacawama