SwiftUI中实现点击按钮先向上移出再跳转目标视图可行吗？

要实现点击按钮时先让按钮向上移出屏幕，再触发目标视图的导航转场，可以通过分离按钮动画与导航触发时机来实现，核心是让按钮的向上动画先完成，再启动导航。以下是修改后的完整代码及关键说明：

修改后的代码 #

import SwiftUI

struct firstView: View {
    var body: some View {
        Text("First View")
            .font(.largeTitle)
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.blue)
    }
}

struct ContentView: View {
    @State private var moving = false
    @State private var showFirstView = false
    // 新增状态：控制导航前的按钮移出动画
    @State private var isNavigating = false

    var body: some View {
        NavigationStack {
            VStack {
                Image("DogPhone")
                    .resizable()
                    .scaledToFit()
                    .cornerRadius(50.0)
                    .edgesIgnoringSafeArea(.all)
                
                Spacer()
            }
            
            Button(action: {
                // 先触发按钮向上移出的动画
                withAnimation(.interpolatingSpring(stiffness: 100, damping: 8)) {
                    isNavigating = true
                } completion: {
                    // 动画完成后再触发导航
                    showFirstView = true
                    // 重置导航状态，返回时可重新触发动画
                    DispatchQueue.main.async {
                        isNavigating = false
                    }
                }
            }, label: {
                Image("marker")
                    .resizable()
                    .frame(width: 80, height: 80)
                    .transition(.move(edge: .bottom))
            })
            .offset(x: -100.0, y: 10.0)
            // 组合初始动画与导航前移出动画的offset
            .offset(y: moving ? (isNavigating ? -400 : -100) : 400)
            .animation(.interpolatingSpring(stiffness: 100, damping: 8), value: moving)
            .animation(.interpolatingSpring(stiffness: 100, damping: 8), value: isNavigating)
        }
        .onAppear {
            moving.toggle()
        }
        .onDisappear {
            moving.toggle()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(.dark)
    }
}

关键修改说明 #

1. 新增isNavigating状态：专门控制点击按钮后的向上移出动画，与初始的moving状态分离，避免逻辑混淆。
2. 分离动画与导航触发：使用withAnimation(_:completion:)（iOS 15+支持），先执行按钮向上移出的动画，动画完成后再设置showFirstView触发导航转场，确保按钮完全移出后才开始导航。
3. 组合offset逻辑：按钮的最终offset由moving（初始入场）和isNavigating（导航前移出）共同控制，isNavigating为true时让按钮向上移出屏幕外（这里设为-400，可根据实际布局调整）。
4. 重置导航状态：在导航完成后的异步回调中重置isNavigating，保证返回当前页面后按钮能重新正常触发动画。

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