SwiftUI旋钮旋转跳动、无法平滑转动的原因及解决方法

问题描述 #

尝试创建SwiftUI视图，实现红色旋钮围绕蓝色矩形平滑旋转，但当前代码运行时旋钮出现跳动现象，代码如下：

import SwiftUI

struct RotatingKnobView: View {
    @State private var knobRotation: Double = 0.0

    var body: some View {
        ZStack {
            Rectangle()
                .frame(width: 200, height: 100)
                .foregroundColor(Color.blue)
            
            Circle()
                .frame(width: 40, height: 40)
                .foregroundColor(Color.red)
                .offset(x: 100, y: 50)
                .gesture(
                    DragGesture()
                        .onChanged { value in
                            DispatchQueue.main.async {
                                withAnimation {
                                    let translation = value.translation.width
                                    let degrees = translation / 2 // Adjust sensitivity as needed
                                    
                                    // Update the rotation angle state in degrees
                                    if degrees < 0 {
                                        knobRotation = degrees * -1
                                    } else {
                                        knobRotation = degrees
                                    }
                                    
                                    print(knobRotation)
                                }
                            }
                        }
                )
        }
        .rotationEffect(Angle(degrees: knobRotation))
    }
}

struct RotatingKnobView_Previews: PreviewProvider {
    static var previews: some View {
        RotatingKnobView()
    }
}

问题成因 #

• 手势计算逻辑错误：使用value.translation.width作为旋转角度依据，translation是拖动时相对于手势起始点的偏移值，而非累计的角度变化。每次重新拖动时，translation会从0开始，导致旋转角度被重置，引发跳动。
• 旋转对象错误：当前将rotationEffect作用于整个ZStack，导致矩形和旋钮一起旋转，不符合“旋钮围绕矩形旋转”的需求，同时放大了角度计算错误带来的跳变感。
• 冗余的主队列切换：DragGesture的回调本身就在主队列执行，额外的DispatchQueue.main.async会导致状态更新延迟，加重跳动现象。
• 角度更新逻辑错误：直接覆盖knobRotation而非累加角度变化，且错误的取反逻辑导致拖动方向与旋转方向不匹配，进一步加剧跳变。

解决方案 #

以下是修正后的代码，实现旋钮围绕矩形右下角平滑旋转：

import SwiftUI

struct RotatingKnobView: View {
    // 保存总旋转角度
    @State private var totalRotation: Double = 0.0
    // 记录上一次拖动的角度，用于计算增量
    @State private var lastDragAngle: Double = 0.0

    var body: some View {
        ZStack {
            // 固定的蓝色矩形，居中显示
            Rectangle()
                .frame(width: 200, height: 100)
                .foregroundColor(.blue)
            
            // 红色旋钮，初始位置在矩形右下角
            Circle()
                .frame(width: 40, height: 40)
                .foregroundColor(.red)
                .offset(x: 100, y: 50)
                // 以矩形右下角为锚点旋转旋钮
                .rotationEffect(Angle(degrees: totalRotation), anchor: .init(x: -100/40, y: -50/40))
                .gesture(
                    DragGesture(minimumDistance: 0)
                        .onChanged { value in
                            // 旋转锚点（矩形右下角）在ZStack坐标系中的位置
                            let anchorPoint = CGPoint(x: 100, y: 50)
                            // 当前拖动的位置
                            let currentPoint = value.location
                            
                            // 计算拖动点相对于锚点的向量，转换为角度（弧度转角度）
                            let deltaX = currentPoint.x - anchorPoint.x
                            let deltaY = currentPoint.y - anchorPoint.y
                            let currentAngle = atan2(deltaY, deltaX) * 180 / .pi
                            
                            // 第一次拖动时初始化上次角度
                            if lastDragAngle == 0 {
                                lastDragAngle = currentAngle
                            }
                            
                            // 计算本次拖动的角度增量，累加到总旋转角度
                            let angleDelta = currentAngle - lastDragAngle
                            totalRotation += angleDelta
                            lastDragAngle = currentAngle
                        }
                        .onEnded { _ in
                            // 拖动结束后重置上次角度，避免下次拖动跳变
                            lastDragAngle = 0
                        }
                )
        }
        .frame(width: 300, height: 200) // 预留足够空间显示旋转的旋钮
    }
}

struct RotatingKnobView_Previews: PreviewProvider {
    static var previews: some View {
        RotatingKnobView()
    }
}

关键改动说明 #

• 基于拖动位置计算角度：通过计算拖动点相对于旋转锚点的向量，使用atan2函数得到实时角度，彻底解决translation带来的重置问题。
• 累计旋转角度：用totalRotation保存总旋转角度，lastDragAngle记录上一次拖动的角度，通过增量累加保证旋转的连续性。
• 指定旋转锚点：通过rotationEffect的anchor参数，将旋钮的旋转中心设定为矩形的右下角（参数值为相对于旋钮自身尺寸的比例）。
• 移除冗余代码：删除不必要的DispatchQueue.main.async和withAnimation，手势回调本身在主队列执行，系统会自动处理平滑过渡。

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