主页 / coding / 问题 / 78843551
Accepted
Swift
Asked: 2024-08-07 19:59:52 +0800 CST

如何在 SwiftUI 中点击按钮时在导航视图时添加动画

  • 772

如何获得这样的动画

在此处输入图片描述

代码：使用此代码，我可以正常导航视图，但如果我进入，AttendanceSwipeView(viewModel: viewModel)然后我点击仪表板，那么视图应该带有这种动画（就像从底部到后部的动画）...

我的意思是仪表板>出勤>提要...导航可以正常，但是

从 Feed 到 Attendance，再从 Attendance 到 Dashboard...这里需要从下到上的动画。如果可能的话，请指导我如何实现这一点。

struct DashboardBottomView: View {
    @StateObject var viewModel: AppDashboardViewModel
    @State var selectedClassInd: Int = 0
    @State private var stringArray = ["Dashboard", "Attendance", "Feed"]
    @State private var selectedIndex: Int? = nil
    @State private var selectedIndexStr: String? = "Dashboard"
    
    
    private func viewForSelectedIndex() -> some View {
        switch selectedIndexStr {
        case "Dashboard":
            return AnyView(DashboardView(viewModel: viewModel))
        case "Attendance":
            return AnyView(AttendanceSwipeView(viewModel: viewModel))
        case "Feed":
            return AnyView(DashboardFeedView())
        default:
            return AnyView(Text("Default View"))
        }
    }
    
    var body: some View {
        
        VStack(spacing: 0) {
            Spacer()
            
            ZStack {
                viewForSelectedIndex()
                    .toolbar(.hidden, for: .navigationBar)

            }
            
            ZStack{
                Color.appGreen2
                ScrollView(.horizontal, showsIndicators: false) {
                    LazyHGrid(rows: [GridItem(.flexible(), spacing: 0)], spacing: 0) {
                        ForEach(stringArray, id: \.self) { data in
                            Button {
                                withAnimation {
                                    selectedIndexStr = data
                                }
                            }
                        label: {
                            VStack {
                                Text(data)
                                    .font(.calibriBold(with: 14))
                                    .foregroundColor(Color.white)
                                    .padding(.horizontal, 8)
                                if selectedIndexStr == data {
                                    gradientDivider
                                        .frame(height: 2)
                                }
                            }
                            .frame(height: 40)
                            .frame(minWidth: 108)
                            .animation(.default, value: selectedClassInd)
                        }
                        .buttonStyle(.plain)
                        }
                    }
                    .padding(.bottom, 0)
                    .background(Color.appGreen2)
                }
                .frame(height: 55)
            }
        }
        .ignoresSafeArea()
        
        .onAppear {
            viewModel.fetchDashboardData { status in
                if status {
                    stringArray = viewModel.dashboardButtonsArray
                    selectedIndexStr = stringArray.first
                }
            }
        }
    }
}
animation

1 个回答

  1. Best Answer

    这里可以使用自定义转换。

    自定义过渡可以应用于处于（之前）和（之后）状态ViewModifier的视图。当过渡动画化时，两个状态之间会自动进行插值。对于简单的线性过渡来说，这很好，这里的情况似乎就是如此。activeidentity

    以下ViewModifier将不透明度、旋转和偏移效果应用于视图：

    struct SwipeMovement: ViewModifier {
    let progress: Double

    func body(content: Content) -> some View {
        content
            .opacity(progress)
            .offset(y: -400)
            .rotationEffect(.degrees((progress - 1) * 30))
            .offset(y: 400 + ((1 - progress) * 100))
    }
}

    自定义过渡可以定义extension为AnyTransition：

    private extension AnyTransition {
    static var swipeMovement: AnyTransition {
        .modifier(
            active: SwipeMovement(progress: 0),
            identity: SwipeMovement(progress: 1)
        )
    }
}

    现在自定义过渡已准备就绪，可供使用。以下代码是示例的改编版本，并进行了以下更改：

    • previousSelectedIndexStr添加了一个新的状态变量，用于记录前一个导航目标。

    • 按钮操作previousSelectedIndexStr在更改之前将当前选择保存为selectedIndexStr。

    • 该函数viewForSelectedIndex已被标记为ViewBuilder。这避免了必须将不同类型的结果包装为AnyView。

    • isSpecialTransitionNeeded是一个计算属性，它根据 的上一个和下一个值来确定是否需要特殊转换selectedIndexStr。这是像您之前使用的那样进行字符串比较，但我建议在这里使用枚举可能会更好。

    • 顶部ZStack包含一个if语句，用于确定是否应用不同的过渡。这是一种在不同类型的过渡之间切换的相当原始但又简单的方法。

    • 特殊过渡仅用于insertion过渡，removal过渡始终是.opacity。

    • .animation已将修饰符添加到。ZStack这可控制过渡速度。出于演示目的，.gray还已将 用作 的背景ZStack。

    • 原始示例中未编译的代码已被注释掉或替换为简单的替代代码。

    struct DashboardBottomView: View {
//    @StateObject var viewModel: AppDashboardViewModel
    @State var selectedClassInd: Int = 0
    @State private var stringArray = ["Dashboard", "Attendance", "Feed"]
    @State private var selectedIndex: Int? = nil
    @State private var previousSelectedIndexStr: String?
    @State private var selectedIndexStr: String? = "Dashboard"

    @ViewBuilder
    private func viewForSelectedIndex() -> some View {
        switch selectedIndexStr {
        case "Dashboard":
            Text("DashboardView")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(.background)
        case "Attendance":
            Text("AttendanceSwipeView")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(.yellow)
        case "Feed":
            Text("DashboardFeedView")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(.orange)
        default:
            Text("Default View")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(.red)
        }
    }

    private var isSpecialTransitionNeeded: Bool {
        if let previousSelectedIndexStr, let selectedIndexStr {
            (previousSelectedIndexStr == "Feed" && selectedIndexStr == "Attendance") ||
            (previousSelectedIndexStr == "Attendance" && selectedIndexStr == "Dashboard")
        } else {
            false
        }
    }

    var body: some View {
        VStack(spacing: 0) {
            Spacer()

            ZStack {
                if isSpecialTransitionNeeded {
                    viewForSelectedIndex()
                        .transition(
                            .asymmetric(
                                insertion: .swipeMovement,
                                removal: .opacity
                            )
                        )
                } else {
                    viewForSelectedIndex()
                        .transition(.opacity)
                }
            }
            .background(.gray)
            .animation(.easeInOut(duration: 1), value: selectedIndexStr)
            .toolbar(.hidden, for: .navigationBar)

            ZStack{
                Color.green //appGreen2
                ScrollView(.horizontal, showsIndicators: false) {
                    LazyHGrid(rows: [GridItem(.flexible(), spacing: 0)], spacing: 0) {
                        ForEach(stringArray, id: \.self) { data in
                            Button {
                                previousSelectedIndexStr = selectedIndexStr
                                withAnimation {
                                    selectedIndexStr = data
                                }
                            }
                        label: {
                            VStack {
                                Text(data)
//                                    .font(.calibriBold(with: 14))
                                    .foregroundColor(Color.white)
                                    .padding(.horizontal, 8)
//                                if selectedIndexStr == data {
//                                    gradientDivider
//                                        .frame(height: 2)
//                                }
                            }
                            .frame(height: 40)
                            .frame(minWidth: 108)
                            .animation(.default, value: selectedClassInd)
                        }
                        .buttonStyle(.plain)
                        }
                    }
                    .padding(.bottom, 0)
                    .background(Color.green) // appGreen2
                }
                .frame(height: 55)
            }
        }
        .ignoresSafeArea()

//        .onAppear {
//            viewModel.fetchDashboardData { status in
//                if status {
//                    stringArray = viewModel.dashboardButtonsArray
//                    selectedIndexStr = stringArray.first
//                }
//            }
//        }
    }
}

    动画片

    • 1

相关问题