SwiftUI中MatchedGeometryEffect反向切换位置时动画失效求助

你的问题出在：只有选中的导航项才会渲染带matchedGeometryEffect的胶囊背景，当反向切换时，原选中项的胶囊被直接移除，系统无法找到前后状态的匹配视图，导致动画中断。

修复方案是让每个导航项始终保留胶囊背景，通过颜色或透明度控制显示状态，确保matchedGeometryEffect始终能找到对应视图完成动画过渡。

修改后的完整代码：

import SwiftUI

enum CapsuleNavTitles: String, CaseIterable {
    case Discussion = "Discussion"
    case About = "About"
    case Memebers =  "Members"
}

struct CapsuleNavAnimationComponent: View {
    
    @State var currentNav: CapsuleNavTitles = .Discussion
    @Namespace var animation
    
    var body: some View {
        CapsuleNav()
    }
    
    @ViewBuilder
    func CapsuleNav() -> some View {
        HStack() {
            ForEach(CapsuleNavTitles.allCases, id: \.rawValue) { nav in
                Text(nav.rawValue)
                    .padding(EdgeInsets(top: 9, leading: 17, bottom: 9, trailing: 17))
                    .background(
                        Capsule()
                            .fill(currentNav == nav ? Color.buttonColor : Color.clear)
                            .matchedGeometryEffect(id: "CapsuleNavTitles", in: animation)
                    )
                    .foregroundColor(currentNav == nav ? .white : .black)
                    .onTapGesture {
                        withAnimation(.easeInOut) {
                            currentNav = nav
                        }
                    }
            }
        }
        .background(Capsule().fill(Color.mainColor))
    }
}

关键修改说明： #

• 移除背景视图的条件判断，每个导航项都保留Capsule背景视图
• 通过currentNav == nav切换填充色：选中时使用按钮色，未选中时设为透明
• 这样matchedGeometryEffect在切换前后都能找到对应的胶囊视图，正向和反向切换都会有连贯的动画效果

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