SwiftUI .matchGeometryEffect 过渡不流畅问题求助

针对你遇到的过渡速度不一致、返回裁切、末尾淡入淡出这些问题，核心修复思路如下：

关键问题根源 #

• 状态切换顺序错误：返回时先清空selectedPerson会让匹配的源视图提前消失，导致matchedGeometryEffect失去锚点，动画直接异常
• 布局干扰：用空白Rectangle替换选中卡片的逻辑，破坏了原有布局稳定性，动画计算出错
• 动画参数不统一：返回时未指定和放大时一致的动画曲线，导致快慢差异
• 默认过渡残留：系统默认的淡入淡出未显式关闭

修复后的完整代码 #

struct PeopleView: View {
    
    struct Person: Identifiable {
        let id: UUID = UUID()
        let first: String
        let last: String
    }
    
    @Namespace var animationNamespace
    
    @State private var isDetailPresented = false
    @State private var selectedPerson: Person? = nil
    
    let people: [Person] = [
        Person(first: "John", last: "Doe"),
        Person(first: "Jane", last: "Doe")
    ]
    
    var body: some View {
        homeView
            .overlay {
                if isDetailPresented, let selectedPerson {
                    detailView(person: selectedPerson)
                        // 禁用系统默认过渡，消除淡入淡出
                        .transition(.identity)
                }
            }
    }
    
    var homeView: some View {
        ScrollView {
            VStack {
                cardScrollView
            }
        }
    }
    
    var cardScrollView: some View {
        ScrollView(.horizontal) {
            HStack {
                ForEach(people) { person in
                    // 用透明度隐藏选中卡片，保留布局位置，避免结构破坏
                    personView(person: person, size: 100)
                        .opacity(selectedPerson?.id == person.id && isDetailPresented ? 0 : 1)
                        .onTapGesture {
                            withAnimation(.interactiveSpring(response: 0.3, dampingFraction: 0.8, blendDuration: 0.8)){
                                self.selectedPerson = person
                                self.isDetailPresented = true
                            }
                        }
                }
            }
        }
    }
    
    func personView(person: Person, size: CGFloat) -> some View {
        Group {
            Text(person.first)
                .padding()
                .frame(height: size)
                .background(Color.gray)
                .cornerRadius(5)
                .shadow(radius: 5)
        }
        .matchedGeometryEffect(id: person.id, in: animationNamespace)
    }
    
    func detailView(person: Person) -> some View {
        VStack {
            personView(person: person, size: 300)
            Text(person.first + " " + person.last)
        }
        .onTapGesture {
            // 先关闭详情页，动画结束后再清空选中项，确保动画过程中源视图存在
            withAnimation(.interactiveSpring(response: 0.3, dampingFraction: 0.8, blendDuration: 0.8)){
                self.isDetailPresented = false
            }
            // 延迟清空，等待动画完成
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                self.selectedPerson = nil
            }
        }
    }
}

修复说明 #

• 用.opacity(0)替代空白Rectangle，既隐藏选中卡片又保留布局位置，保证动画计算稳定
• 返回时使用和放大时完全一致的interactiveSpring动画参数，解决速度不一致问题
• 过渡设置为.identity，彻底关闭系统默认的淡入淡出效果
• 延迟清空selectedPerson是核心，确保matchedGeometryEffect在整个动画过程中都能找到源视图和目标视图

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