SwiftUI中用alignmentGuide与PreferenceKey实现双视图对齐动画

要实现矩形A的中心点水平对齐旋转中矩形B的左上角，你可以按以下步骤修改代码：

1. 捕获矩形B的实时左上角锚点 #

在旋转后的矩形B上，通过anchorPreference将它的**左上角锚点（.topLeading）**记录到自定义的MyAnchorKey中，确保父视图能获取到B旋转过程中的实时位置。

2. 绑定锚点并设置对齐规则 #

在父容器（VStack）上监听PreferenceKey的变化，把B的锚点保存到状态变量中，再给矩形A添加alignmentGuide，让它的中心点水平坐标（.centerX）对齐到B的左上角水平坐标。

完整代码示例 #

struct MyAnchorKey: PreferenceKey {
    static var defaultValue: Anchor<CGPoint>? = nil

    static func reduce(value: inout Anchor<CGPoint>?, nextValue: () -> Anchor<CGPoint>?) {
        value = value ?? nextValue()
    }
}

struct ContentView: View {
    @State private var rotationAngle: Double = 0
    @State private var bTopLeadingAnchor: Anchor<CGPoint>? = nil

    var body: some View {
        VStack(spacing: 50) {
            // 矩形A：水平对齐B的左上角
            Rectangle()
                .fill(Color.blue)
                .frame(width: 50, height: 50)
                .alignmentGuide(.centerX) { dimension in
                    guard let anchor = bTopLeadingAnchor else {
                        return dimension[.centerX] // 默认对齐自身中心
                    }
                    return dimension[anchor].x // 对齐B的左上角x坐标
                }

            // 矩形B：旋转并传递左上角锚点
            Rectangle()
                .fill(Color.gray)
                .frame(width: 200, height: 50)
                .rotationEffect(.degrees(rotationAngle))
                .anchorPreference(key: MyAnchorKey.self, value: .topLeading) { $0 }
                .animation(Animation.linear(duration: 3).repeatForever(autoreverses: false), value: rotationAngle)
        }
        .onPreferenceChange(MyAnchorKey.self) { newAnchor in
            bTopLeadingAnchor = newAnchor
        }
        .onAppear {
            rotationAngle = 360
        }
    }
}

代码说明 #

• anchorPreference(key:value:transform:)：将矩形B的.topLeading锚点存入MyAnchorKey，保证旋转过程中锚点位置实时更新。
• onPreferenceChange：监听MyAnchorKey的变化，把最新的锚点保存到bTopLeadingAnchor状态变量中。
• alignmentGuide(.centerX)：重写矩形A的水平中心对齐规则，让它的中心x坐标等于B的左上角x坐标，实现水平方向的动态对齐。
• 动画绑定：将动画绑定到rotationAngle，确保B旋转时A的移动也带有平滑过渡效果。

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