iOS 17下页面跳转时SwiftUI圆形动画消失问题求助

问题根源 #

你的圆形动画视图挂载在NavigationStack的外层overlay上，当通过navigationDestination跳转到注册页面时，注册页面会占据整个导航栈的内容区域，要么遮挡住外层圆形视图，要么因视图层级切换导致动画中断后视图被移除。

修复方案 #

将圆形视图移到NavigationStack内部，作为所有页面的共享背景元素，确保跳转后视图不消失，同时优化动画连贯性：

修改后的核心代码

struct JoinPage: View{
    @State private var showSignup: Bool = false
    var body: some View {
        NavigationStack {
            // 用ZStack将圆形视图作为LoginPage的背景
            ZStack {
                CircleView()
                    .animation(.smooth(duration: 0.45, extraBounce: 0), value: showSignup)
                
                LoginPage(showSignup: $showSignup)
            }
            .navigationDestination(isPresented: $showSignup) {
                // 注册页面同样保留圆形背景
                ZStack {
                    CircleView()
                        .animation(.smooth(duration: 0.45, extraBounce: 0), value: showSignup)
                    
                    SignupPage() // 替换为你的注册页面
                }
            }
        }
    }
    
    @ViewBuilder
    func CircleView() -> some View{
        Circle()
            .fill(.linearGradient(colors: [Color.green, .blue, .green], startPoint: .top, endPoint: .bottom))
            .frame(width: 200, height:200)
            .offset(x: showSignup ? 90 : -90, y:-90)
            .blur(radius: 15)
            .hSpacing(showSignup ? .trailing : .leading)
            .vSpacing(.top)
            .allowsHitTesting(false) // 避免拦截页面交互
    }
}

额外优化

在登录页面的注册按钮中，用withAnimation包裹状态切换，让动画与导航跳转同步：

Button("Sign Up"){
    withAnimation(.smooth(duration: 0.45, extraBounce: 0)) {
        showSignup.toggle()
    }
}

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