matchedGeometryEffect设置anchor为center时动画异常，是否为正常行为？

这是matchedGeometryEffect修饰符顺序导致的预期外行为，并非bug，调整修饰符顺序即可解决。

核心原因 #

SwiftUI中修饰符的执行顺序直接影响视图的布局和动画计算：

• 你的代码中matchedGeometryEffect放在frame之前，意味着锚点计算是基于视图未被frame限制时的原始尺寸（比如Circle默认会填充整个ZStack），而非frame定义的最终尺寸。
• 当切换视图时，两个视图的锚点对应的实际屏幕位置不匹配，就会出现圆形下移的异常动画。

解决方案 #

将matchedGeometryEffect放在frame修饰符之后，让锚点基于frame定义的视图尺寸计算：

struct ContentView: View {
    @Namespace var tem
    @State var isTemp: Bool = true
        
    var body: some View{
        ZStack{
            if isTemp{
                Circle()
                    .foregroundColor(.green)
                    .frame(width: 200, height: 200)
                    .matchedGeometryEffect(id: "haha", in: tem, anchor: .center)
            }else{
                Rectangle()
                    .foregroundColor(.blue).opacity(0.4)
                    .frame(width: 400, height: 600)
                    .matchedGeometryEffect(id: "haha", in: tem, anchor: .center)
            }
            
            Button {
                withAnimation(.linear(duration: 5)){
                    isTemp = false
                }
            } label: {
                Text("switch")
            }
        }
    }
}

额外说明 #

• 当设置anchor: .top时，你觉得动画正常，本质是matchedGeometryEffect强制让两个视图的顶部锚点重合，但这其实是基于原始视图尺寸的锚点对齐，并非你真正需要的“基于frame的顶部对齐”。调整修饰符顺序后，无论设置哪个锚点，动画都会基于frame后的视图尺寸计算，表现更符合预期。
• 若需要更精细的布局控制，可以给ZStack指定明确的alignment参数，确保视图在父容器中的基准位置一致。

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