SwiftUI Matched Geometry Effect 出现非预期交叉淡入淡出问题

问题背景 #

在SwiftUI开发两个页面（Screen A、Screen B）时，尝试用Matched Geometry Effect实现过渡动画：

• Screen A 是圆角半径15、尺寸30x30的圆角矩形（视觉为圆形）
• Screen B 是圆角半径0的全屏圆角矩形作为背景

预期效果：单个元素无缝变形，平滑过渡圆角半径、宽高属性。
实际问题：过渡更偏向交叉淡入淡出——源形状淡出时会向目标圆角插值，但目标形状淡入时不会从源圆角开始插值，动画进度到50%左右可明显看到异常。

注：不可修改动画触发机制（大型项目简化版），必须通过withAnimation{}修改navController.screen触发动画。

问题根源 #

Matched Geometry Effect默认会对两个视图的属性独立插值，但当视图存在以下差异时，SwiftUI会优先选择淡入淡出而非形状插值：

1. 填充样式不统一（纯色 vs 渐变），系统无法自动做平滑过渡
2. 圆角半径为固定值，导致插值逻辑出现断层

解决方案 #

核心思路是让两个视图的可插值属性保持动态连续性，引导SwiftUI执行形状和样式的连续插值：

修改后代码 #

主页面（ContentView）

enum Screen {
    case main, target
}

@Observable
class Nav {
    var screen: Screen = .main
    // 动态绑定圆角半径，随动画插值
    var cornerRadius: CGFloat = 15
}

struct ContentView: View {
    @Environment(Nav.self) var navController
    @Namespace var namespace
    
    var body: some View {
        switch navController.screen {
        case .main:
            ZStack {
                RoundedRectangle(cornerRadius: navController.cornerRadius)
                    // 用同色渐变替代纯色，与目标页填充类型统一
                    .fill(LinearGradient(colors: [.green, .green], startPoint: .top, endPoint: .bottom))
                    .matchedGeometryEffect(id: "circleToBackground", in: namespace, properties: .frame)
                    .frame(width: 30, height: 30)
                    .onTapGesture {
                        withAnimation(.easeInOut(duration: 4.0)) {
                            navController.screen = .target
                            navController.cornerRadius = 0
                        }
                    }
            }
            
        case .target:
            TargetScreen(namespace: namespace)
        }
    }
}

目标页面（TargetScreen）

struct TargetScreen: View {
    let namespace: Namespace.ID
    @Environment(Nav.self) var navController
    
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: navController.cornerRadius)
                .fill(LinearGradient(colors: [.green, .white], startPoint: UnitPoint(x:0.5,y:0.0), endPoint: UnitPoint(x:0.5,y:1.0)))
                .matchedGeometryEffect(id: "circleToBackground", in: namespace, properties: .frame)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            Text("BACK")
                .onTapGesture {
                    withAnimation(.easeInOut(duration: 4.0)) {
                        navController.screen = .main
                        navController.cornerRadius = 15
                    }
                }
        }
    }
}

关键修改说明 #

• 动态圆角半径：通过Nav类的cornerRadius属性绑定两个视图的圆角，让动画过程中圆角从15平滑插值到0，避免固定值导致的插值断层
• 统一填充类型：主页面使用同色渐变替代纯色，与目标页填充类型一致，让系统识别到样式连续性，优先执行形状插值
• 明确匹配属性：添加properties: .frame，强制框架针对尺寸做匹配，配合动态圆角实现完整的形状变形

修改后动画将完全呈现单个元素从圆形平滑变形为全屏矩形的效果，不再出现交叉淡入淡出的异常。

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