如何利用Matched Geometry Effect实现跨页面Text动画？

问题现象 #

使用MatchedGeometryEffect实现Text组件在跨页面间的过渡动画时，出现两个文本交叉淡入淡出、目标文本在动画过程中被截断为省略号的异常表现。单页面场景下动画可正常实现源与目标的尺寸连续插值，但跨页面切换时失效，且不希望通过固定frame的方式解决（该方式在修改字体或文本内容时易失效，且无法预先知晓文本实际尺寸）。

原因分析 #

MatchedGeometryEffect的平滑尺寸插值依赖源视图和目标视图同时存在于视图层级中，系统需要捕获两者的尺寸、位置信息才能完成连续插值计算。直接通过switch切换页面会导致其中一个视图被完全移除，系统无法获取完整的插值数据，只能默认 fallback 到淡入淡出动画；同时，目标视图的父容器在动画初期未预留足够空间，导致文本因尺寸不足被截断。

解决方案 #

使用ZStack叠加两个页面视图，通过控制视图的opacity和isHidden（而非直接移除视图）实现页面切换，确保动画过程中两个视图都存在于层级中，让MatchedGeometryEffect能正常计算尺寸插值。同时为Text添加fixedSize()避免动画过程中文本被截断。

修改后的完整代码 #

import SwiftUI

enum NavTarget {
    case main
    case subScreen
}

struct ContentView: View {
    @Namespace private var animationNamespace
    @State var nav: NavTarget = .main
    
    var body: some View {
        ZStack {
            // 源页面：根据导航状态控制显示状态
            SourceScreen(nav: $nav, animationNamespace: animationNamespace)
                .opacity(nav == .main ? 1 : 0)
                .isHidden(nav != .main)
            
            // 目标页面：同理控制显示状态
            TargetScreen(nav: $nav, animationNamespace: animationNamespace)
                .opacity(nav == .subScreen ? 1 : 0)
                .isHidden(nav == .main)
        }
    }
}

#Preview {
    ContentView()
}

struct SourceScreen: View {
    @Binding var nav: NavTarget
    var animationNamespace: Namespace.ID

    var body: some View {
        VStack {
            Spacer()

            Text("Example Text")
                .font(.body)
                .fixedSize() // 强制文本以固有尺寸显示，避免截断
                .matchedGeometryEffect(id: "exampleText", in: animationNamespace)

            Spacer()

            Button("Toggle") {
                withAnimation(.easeInOut(duration: 0.5)) {
                    nav = .subScreen
                }
            }
        }
    }
}

struct TargetScreen: View {
    @Binding var nav: NavTarget
    var animationNamespace: Namespace.ID

    var body: some View {
        VStack {
            Spacer()

            Text("Example Text")
                .font(.largeTitle)
                .fixedSize() // 强制文本以固有尺寸显示，避免截断
                .matchedGeometryEffect(id: "exampleText", in: animationNamespace)

            Spacer()

            Button("Toggle") {
                withAnimation(.easeInOut(duration: 0.5)) {
                    nav = .main
                }
            }
        }
    }
}

关键说明 #

1. ZStack叠加视图：通过ZStack同时保留两个页面视图，仅通过透明度和隐藏状态控制显示，确保MatchedGeometryEffect能持续获取源和目标的尺寸、位置信息。
2. fixedSize()：强制文本以自身固有尺寸渲染，避免父容器在动画过程中因布局计算不及时导致文本截断。
3. isHidden的使用：isHidden会保留视图的布局空间，而直接移除视图会触发布局重新计算，破坏动画所需的尺寸插值基础。

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