ios - 为什么我的 matchedGeometryEffect 基于右下角移动？

Question

我只是尝试使用 matchedGeometryEffect 制作一些动画。

但是有一个错误，对象是基于右下角的点而不是中心进行动画处理。

我使用的代码在这里。:

import SwiftUI

struct Test: View {
    @Namespace private var animation
    @State var show = false
    
    var body: some View {
        HStack {
            if show != true {
                Rectangle()
                    .frame(width: 50, height: 50)
                    .matchedGeometryEffect(id: "animation", in: animation)
            }
            Spacer()
            Button(action: {
                withAnimation {
                    show.toggle()
                }
            }) {
                Text("Switch")
            }
            Spacer()

            if show {
                Rectangle()
                    .frame(width: 200, height: 200)
                    .matchedGeometryEffect(id: "animation", in: animation)
            }
        }
    }
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

使用这些代码，我得到了这个结果。:

本来，我打算让他们像这样移动的。 (从 https://swiftui-lab.com/matchedgeometryeffect-part1 得到这个)

如您所见，与我的不同，它们是基于中心点移动的。

我不知道是什么问题。

我用 Image, Text things 对它进行了测试，但它的行为方式相同。

这是否只发生在我的笔记本电脑上？

如果您能告诉我这里哪里有问题，我将不胜感激。

Answer 1

在固定 View 下方查找 - 修饰符的顺序很重要。使用 Xcode 13/iOS 14 测试

注意:慢速动画已激活以获得更好的可见性

struct Test: View {
    @Namespace private var ns
    @State var show = false

    var body: some View {
        HStack {
            if show != true {
                Rectangle()
                    .matchedGeometryEffect(id: "animation", in: ns) // << here !!
                    .frame(width: 50, height: 50)
            }
            Spacer()
            Button(action: {
                withAnimation {
                    show.toggle()
                }
            }) {
                Text("Switch")
            }
            Spacer()

            if show {
                Rectangle()
                    .matchedGeometryEffect(id: "animation", in: ns) // << here !!
                    .frame(width: 200, height: 200)
            }
        }
    }
}