如何修改NavigationLink跳转View时的默认滑动动画？

针对你遇到的默认滑动动画不符合需求的问题，以下是几种可行的修改方案：

1. 用withAnimation包裹状态切换 #

直接在触发跳转的代码中，用withAnimation指定自定义动画类型，替代默认的滑动效果。

修改你的Button action部分：

Button {
    // 这里可以替换成你需要的动画，比如.easeInOut、.spring等，还能自定义时长
    withAnimation(.easeInOut(duration: 0.3)) {
        isActive1 = true
    }
    selectedTab = .recipe
}

这种方式会让跳转动画跟随你指定的动画参数，简单直接。

2. iOS 16+ 用.navigationTransition自定义转场 #

如果你的App支持iOS16及以上，可以给目标视图添加.navigationTransition修饰符，直接设置内置转场效果，比如淡入淡出、缩放等：

修改NavigationLink的destination部分：

destination: recipeView()
    .navigationBarBackButtonHidden()
    .navigationTransition(.push(.fade)) // 可选效果：.scale、.slide、.opacity等

该方式支持组合多种转场效果，也可以通过.custom()实现完全自定义的转场动画。

3. 完全自定义过渡（适合复杂场景） #

如果需要脱离NavigationLink的默认转场逻辑，可以改用状态控制视图的显隐，配合.transition实现自定义动画：

// 在父视图的body中使用ZStack叠加视图
ZStack {
    // 原有底部Tab等界面内容
    // ...
    
    if isActive1 {
        recipeView()
            .navigationBarBackButtonHidden()
            .transition(.scale.combined(with: .opacity)) // 自定义过渡动画
            .onTapGesture { // 示例：点击返回，可替换为自定义返回按钮
                withAnimation {
                    isActive1 = false
                }
            }
    }
}

// 将原有的NavigationLink替换为普通Button
Button {
    withAnimation {
        isActive1 = true
    }
    selectedTab = .recipe
} label: {
    // 原有的Tab按钮UI代码
}

完整修改后的代码示例（方案1） #

NavigationLink(
    destination: recipeView().navigationBarBackButtonHidden(),
    isActive: $isActive1) {
    Button {
        withAnimation(.spring(response: 0.5, dampingFraction: 0.8)) {
            isActive1 = true
        }
        selectedTab = .recipe
    } label: {
        VStack(alignment: .center, spacing: 4) {
            if selectedTab == .recipe {
                Rectangle()
                    .foregroundColor(selectedTab == .recipe ? Color("Orange") : Color.clear)
                    .frame(width: 90, height: 10)
                    .clipShape(BottomCornerRadius(radius: 5))
                    .offset(y: -11)
            }
            VStack {
                Image(systemName: "fork.knife")
                    .font(.system(size: 30))
                    .foregroundColor(selectedTab == .recipe ? Color("Orange") : Color("tabColor"))
                Text("Recipe")
                    .font(.system(size: 17, weight: .bold, design: .rounded))
                    .foregroundColor(selectedTab == .recipe ? Color("Orange") : Color("tabColor"))
            }
            .background(
                Rectangle()
                    .frame(width: 100, height: 88)
                    .cornerRadius(10)
                    .foregroundColor(selectedTab == .recipe ? Color("Orange").opacity(0.2) : Color.clear)
                    .offset(y: -7)
            )
        }
    }
    .frame(width: UIScreen.main.bounds.width/3)
    .offset(x: 10)
}
.animation(.spring(), value: selectedTab) // 明确动画作用于selectedTab的变化，避免影响跳转动画

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