SwiftUI视图平移同步旋转动画时无法保持锚点位置

问题描述 #

我有一个可通过拖拽手势或底部按钮控制移动的灰色视图，其顶部叠加了一个红色子视图（类似时钟指针）。子视图的旋转角度与父视图offset使用的translation偏移值直接绑定，但给子视图的rotationEffect添加动画后，它无法固定在锚点（灰色视图顶部），会跟着偏移乱跑；移除子视图的.animation()属性后，旋转又能恢复正常。

问题原因 #

核心问题是动画作用域冲突：

• 点击按钮时，withAnimation会给所有依赖translation的视图元素添加动画，包括父视图的offset和子视图的rotationEffect；
• 同时子视图自身又单独设置了针对angle的动画，双重动画叠加导致SwiftUI在计算布局时出现锚点偏移的bug；
• 拖拽手势实时更新translation时，子视图的动画会频繁触发，进一步加剧布局计算的混乱。

解决方案 #

1. 移除子视图上单独的.animation()，统一通过withAnimation控制所有依赖translation的动画；
2. 拖拽过程中禁用动画，避免实时旋转导致的视觉抖动，拖拽结束复位时再添加动画优化体验。

修复后完整代码 #

import UIKit
import SwiftUI
import PlaygroundSupport

struct Example: View {
    
    @State private var translation: CGSize = .zero
    
    var body: some View {
        ZStack {
            movingView()
                .overlay(rotatingView(), alignment: .top)
                .overlay(anchorPoint())
                .offset(translation)
                .gesture(dragGesture())
            
            controls()
        }
    }
}

private extension Example {
    
    func rotatingView() -> some View {
        Rectangle()
            .fill(Color.red)
            .frame(width: 4.0, height: 50.0)
            .rotationEffect(angle, anchor: .bottom)
            // 移除单独的动画配置，统一由withAnimation管控
    }
    
    var angle: Angle {
        let total = translation.height
        return .degrees(total)
    }
    
}

private extension Example {
    
    func movingView() -> some View {
        Color.gray
            .frame(width: 100.0, height: 100.0)
    }
    
    func dragGesture() -> some Gesture {
        DragGesture()
            .onChanged { value in
                // 拖拽时禁用动画，避免实时旋转的抖动
                withTransaction(Transaction(animation: nil)) {
                    self.translation = value.translation
                }
            }
            .onEnded { value in
                // 拖拽结束复位时添加弹簧动画
                withAnimation(.spring()) {
                    self.translation = .zero
                }
            }
    }
    
}

private extension Example {
    func anchorPoint() -> some View {
        Circle()
            .fill(Color.white)
            .frame(width: 8.0, height: 8.0)
    }
}

private extension Example {
    func controls() -> some View {
        VStack {
            Spacer()
            
            HStack {
                Button("Up") {
                    withAnimation(.spring()) {
                        translation.height -= 100
                    }
                }
                
                Button("Down") {
                    withAnimation(.spring()) {
                        translation.height += 100
                    }
                }
            }
        }
    }
}

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = UIHostingController(
    rootView: Example()
        .frame(width: 500.0, height: 800.0)
)

效果说明 #

• 移除子视图的独立动画后，旋转效果会和父视图的偏移动画同步，锚点稳定在灰色视图顶部；
• 拖拽过程中无动画干扰，旋转角度实时跟随偏移值变化，拖拽结束复位时的动画流畅自然。

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