如何通过matchedGeometryEffect实现图片无淡入淡出的平滑过渡？

问题原因 #

当你切换isFlipped状态时，SwiftUI实际上是移除一侧的图片/文本实例，同时在另一侧插入新的实例。尽管matchedGeometryEffect会关联它们的位置，但SwiftUI默认的视图插入/移除过渡（包含透明度变化）仍然生效，导致出现淡入淡出效果。这并非matchedGeometryEffect的缺陷，而是SwiftUI处理视图生命周期变化的默认行为。

解决方案 #

为图片和文本添加.transition(.identity)修饰符，禁用默认过渡效果，只保留matchedGeometryEffect提供的位置平滑动画，即可让图片始终保持实色不透明。

修改后的代码示例 #

struct MainView: View {
    @Namespace private var animation
    @State private var isFlipped = false
    
    var body: some View {
        HStack {
            if isFlipped {
                Text("text")
                    .font(.subheadline)
                    .matchedGeometryEffect(id: "title", in: animation)
                    .transition(.identity) // 禁用默认过渡
                Image("Logo")
                    .matchedGeometryEffect(id: "icon", in: animation)
                    .transition(.identity) // 禁用默认过渡
            } else {
                Image("Logo")
                    .matchedGeometryEffect(id: "icon", in: animation)
                    .transition(.identity) // 禁用默认过渡
                Text("text")
                    .font(.subheadline)
                    .matchedGeometryEffect(id: "title", in: animation)
                    .transition(.identity) // 禁用默认过渡
            }
        }
        .onTapGesture {
            withAnimation {
                isFlipped.toggle()
            }
        }
    }
}

补充说明 #

.transition(.identity)会告知SwiftUI在视图插入或移除时不应用任何过渡动画，这样matchedGeometryEffect就能单独控制位置的平滑移动，确保图片和文本在整个动画过程中保持完全不透明。

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