SwiftUI 底部 Tabbar 导航选项切换动画效果

 

import SwiftUI

struct TabModel:Identifiable{
    var id = UUID()
    var icon:String
    var title:String
}
struct ContentView: View {
    var taps:[TabModel] = [
        TabModel(icon: "person", title: "Accounts"),
        TabModel(icon: "house", title: "Home"),
        TabModel(icon: "creditcard", title: "Payments"),
        TabModel(icon: "arrow.right.arrow.left", title: "Transfers")
        
    ]
    @State var selectedTab = 0
    var body: some View {
        GeometryReader { geo in
            HStack(spacing: 0) {
                redVeiw()
                    .containerRelativeFrame(.horizontal, count: 1, spacing: 0)
                blueVeiw()
                    .containerRelativeFrame(.horizontal, count: 1, spacing: 0)
                greenview()
                    .containerRelativeFrame(.horizontal, count: 1, spacing: 0)
                grayview()
                    .containerRelativeFrame(.horizontal, count: 1, spacing: 0)
            }
            .offset(x: -geo.size.width * CGFloat(selectedTab))
        
        }
        .overlay(alignment: .bottom) {
            HStack{
                ForEach(taps.indices,id:\.self) { tap in
                    HStack(spacing: 14) {
                        Image(systemName:taps[tap].icon)
                        if selectedTab == tap {
                            Text(taps[tap].title).bold()
                                .transition(.scale(scale: 0, anchor: .trailing).combined(with: .opacity))
                        }
                       
                    }
                    .font(.title2)
                    .frame(maxWidth: selectedTab == tap ? .infinity : 55)
                    .frame(height: 55)
                    .background(Color(.systemGray),in:.rect(cornerRadius: 12))
                    .clipped()
                    .onTapGesture {
                        withAnimation {
                            selectedTab = tap
                        }
                    }
                    
                }
            }
            .padding(.horizontal)
         
        }
    }
}

#Preview {
    ContentView()
}
struct redVeiw: View {
    var body: some View {
        ZStack{
            Color.red.ignoresSafeArea()
            Text("RedVeiw").font(.largeTitle)
        }
    }
}
struct blueVeiw: View {
    var body: some View {
        ZStack{
            Color.blue.ignoresSafeArea()
            Text("BlueVeiw").font(.largeTitle)
        }
    }
}
struct greenview: View {
    var body: some View {
        ZStack{
            Color.green.ignoresSafeArea()
            Text("GreenVeiw").font(.largeTitle)
        }
    }
}
struct grayview: View {
    var body: some View {
        ZStack{
            Color.gray.ignoresSafeArea()
            Text("GrayVeiw").font(.largeTitle)
        }
    }
}
struct yellowview: View {
    var body: some View {
        ZStack{
            Color.yellow.ignoresSafeArea()
            Text("YellowVeiw").font(.largeTitle)
        }
    }
}