SwiftUI Tabbar切换动画实现问题求助

需求说明 #

想实现Tab切换时的特定动画，尝试使用matchedGeometryEffect后效果怪异，核心预期效果：

• 点击标签时，当前标签的图标和标题显示在胶囊背景后方
• 未选中标签不显示标题和胶囊背景
• 切换选中标签时，胶囊背景平滑移动至新标签位置，原选中标签的标题同步隐藏

问题分析 #

原实现是给每个选中的TabButton单独添加背景，导致切换时背景是各自出现/消失，无法实现平滑移动效果。matchedGeometryEffect的核心是让同一“身份”的视图在不同位置间过渡，因此需要将胶囊背景作为独立视图，通过匹配不同Tab的位置来实现移动动画。

修改后的完整代码 #

import SwiftUI

struct Tabbar: View {
    @Namespace private var animation
    @State var selectedTab: RootTab = .home
    
    // 存储每个Tab的位置信息
    @State private var tabFrames: [RootTab: CGRect] = [:]
    
    var body: some View {
        ZStack(alignment: .leading) {
            // 独立的胶囊背景，通过matchedGeometryEffect实现移动
            if let frame = tabFrames[selectedTab] {
                Color.blue
                    .frame(width: frame.width, height: frame.height)
                    .cornerRadius(15)
                    .matchedGeometryEffect(id: "TabBackground", in: animation)
                    .animation(.easeInOut(duration: 0.3), value: selectedTab)
            }
            
            HStack(spacing: 0) {
                ForEach(RootTab.allCases, id: \.self) { tab in
                    TabButton(tab: tab)
                        .background(
                            // 记录每个Tab的位置坐标
                            GeometryReader { proxy in
                                Color.clear
                                    .onAppear {
                                        tabFrames[tab] = proxy.frame(in: .named("TabContainer"))
                                    }
                                    .onChange(of: selectedTab) { _ in
                                        tabFrames[tab] = proxy.frame(in: .named("TabContainer"))
                                    }
                            }
                        )
                }
            }
            .padding(.horizontal, 30)
            .padding(.vertical, 10)
            .background(Color.blue.opacity(0.4))
            .cornerRadius(30)
            .coordinateSpace(name: "TabContainer") // 统一坐标空间，确保位置计算准确
        }
        .frame(maxWidth: .infinity)
        .background(Color(uiColor: .systemBackground))
    }
    
    private func TabButton(tab: RootTab) -> some View {
        HStack(spacing: 6) {
            Image(systemName: tab.systemName)
                .font(.title2)
                .foregroundStyle(.white)
                .bold()
            
            // 标题的显示/隐藏过渡动画
            if selectedTab == tab {
                Text(tab.title)
                    .font(.callout)
                    .bold()
                    .foregroundColor(.white)
                    .transition(.opacity.combined(with: .scale))
            }
        }
        .padding(.vertical, 8)
        .padding(.horizontal, selectedTab == tab ? 16 : 8) // 适配选中/未选中状态的padding
        .onTapGesture {
            withAnimation(.easeInOut(duration: 0.3)) {
                selectedTab = tab
            }
        }
    }
}

enum RootTab: String, CaseIterable {
    case home
    case profile
    
    var systemName: String {
        switch self {
        case .home: return "house"
        case .profile: return "person.crop.circle"
        }
    }
    
    var title: String {
        switch self {
        case .home: return "Home"
        case .profile: return "Profile"
        }
    }
}

extension View {
    @ViewBuilder
    func `if`(_ condition: @autoclosure () -> Bool, transform: (Self) -> some View) -> some View {
        if condition() {
            transform(self)
        } else {
            self
        }
    }
    
    func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
        clipShape(RoundedCorner(radius: radius, corners: corners))
    }
}

// 自定义圆角形状（兼容原实现）
struct RoundedCorner: Shape {
    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners
    
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

关键改动说明 #

1. 独立胶囊背景：将蓝色胶囊背景从TabButton中抽离，作为ZStack的顶层视图，通过matchedGeometryEffect绑定统一ID，实现位置平滑过渡。
2. 统一坐标空间：给外层HStack设置coordinateSpace，确保所有Tab的位置计算在同一坐标系下。
3. 位置记录：用GeometryReader实时记录每个Tab按钮的frame，切换时更新位置数据，让背景能精准移动到目标位置。
4. 标题过渡优化：给标题添加组合过渡动画，让显示/隐藏过程更自然流畅。
5. Padding适配：根据选中状态调整Tab的水平padding，避免布局跳动。

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