SwiftUI：实现View不同方向旋转动画及符号旋转差异疑问

实现指定方向的旋转 #

要实现你需要的旋转逻辑（向上状态→向下状态时顺时针从右侧旋转；向下状态→向上状态时逆时针从左侧旋转），不能直接依赖固定角度的rotationEffect（SwiftUI会自动选择最短动画路径），可以通过以下两种方式实现：

方案1：累计旋转角度（兼容全iOS版本） #

通过维护一个累计旋转角度变量，每次切换状态时主动增加/减少180度，强制动画沿指定方向执行：

struct Arrow: View {
    @State var showView = false
    @State private var rotationAngle = 0.0
    
    var body: some View {
        VStack {
            Image(systemName: "chevron.up.circle")
                .resizable()
                .frame(width: 50, height: 50)
                .rotationEffect(.degrees(rotationAngle))
        }
        .onTapGesture {
            withAnimation(Animation.easeInOut(duration: 0.3)) {
                if showView {
                    // 从向下转回向上：逆时针旋转180度
                    rotationAngle -= 180
                } else {
                    // 从向上转到向下：顺时针旋转180度
                    rotationAngle += 180
                }
                showView.toggle()
            }
        }
    }
}

方案2：显式指定旋转方向（iOS 16+） #

利用rotationEffect的style参数，直接指定每次状态切换时的旋转方向：

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 : 0),
                    style: RotationEffectStyle(
                        rotationDirection: showView ? .clockwise : .counterclockwise
                    )
                )
                .animation(Animation.easeInOut(duration: 0.3), value: showView)
        }
        .onTapGesture { showView.toggle() }
    }
}

SF Symbol与普通Image旋转方向差异原因 #

你观察到的旋转方向差异，核心源于两者的渲染机制和系统优化逻辑：

• 普通位图Image：旋转时是对整个像素矩阵执行几何变换，SwiftUI默认选择顺时针的动画路径，视觉上更符合位图的旋转直觉。
• SF Symbol：作为苹果官方矢量图标，系统对其有特殊的动画优化。为了保持图标的视觉自然感，当执行180度旋转时，系统会优先选择逆时针路径——这是因为SF Symbol的矢量路径设计更适配逆时针旋转的连贯性，避免出现视觉扭曲。

内容的提问来源于stack exchange，提问作者Nizami