SwiftUI 中的动画无法正常工作

Question

有人知道为什么以下不是动画并且不能完全工作以及如何解决这个问题吗？ 问题是我们的一些动画在这种情况下没有显示。 也许有一种解决方法？ 我读了好几个小时的文章等等……一无所获

我最终想要实现的是：

1. SignUpLogin 屏幕在出现和消失时都有.move(edge: .top) .opacity .move(edge: .top)和.opacity动画

2. 注销屏幕在出现和消失时都有： .blur和.opacity动画。

当视图重新出现时，模糊和不透明度停止工作（但它们在消失时工作，见 gif）。

Xcode 12，iOS 14

import SwiftUI
import Foundation
import Combine

class ViewRouter: ObservableObject {
    @Published var signUpLoginView_active: Bool = true
    @Published var newUserView_active: Bool = false
}
struct ContentView: View {
    @EnvironmentObject var viewRouter: ViewRouter
    @Environment(\.colorScheme) var colorScheme
    var body: some View {
        ZStack {
            if colorScheme == .dark {
                Color.white.ignoresSafeArea()
            } else {
                Color.black.ignoresSafeArea()
            }
            if viewRouter.newUserView_active {
                NewUserView()
                    .transition(.opacity)
                    .zIndex(4)
            }
            if viewRouter.signUpLoginView_active {
                SignUpLoginView()
                    .transition(.move(edge: .top))
                    .zIndex(5)
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}
struct SignUpLoginView: View {
    @EnvironmentObject var viewRouter: ViewRouter
    @Environment(\.colorScheme) var colorScheme
    var body: some View {
        ZStack() {
            colorScheme == .dark ? Color.black.ignoresSafeArea().zIndex(3) : Color.white.ignoresSafeArea().zIndex(3)
            if colorScheme == .dark {
                Color.white.ignoresSafeArea()
                    .opacity(viewRouter.signUpLoginView_active ? 0 : 1)
                    .zIndex(4)
            } else {
                Color.black.ignoresSafeArea()
                    .opacity(viewRouter.signUpLoginView_active ? 0 : 1)
                    .zIndex(4)
            }
//
            Button("Login") {
                withAnimation(.easeInOut(duration: 3)) {
                    viewRouter.signUpLoginView_active.toggle()
                    viewRouter.newUserView_active.toggle()
                }
            }.zIndex(3)
        }
    }
}
struct NewUserView: View {
    @EnvironmentObject var viewRouter: ViewRouter
    @Environment(\.colorScheme) var colorScheme
    var body: some View {
        ZStack {
            TabView {
                Button("Logout") {
                    withAnimation(.easeInOut(duration: 3)) {
                        viewRouter.signUpLoginView_active.toggle()
                        viewRouter.newUserView_active.toggle()
                    }
                }
                  .tabItem {
                     Image(systemName: "person.crop.circle.fill")
                     Text("My Profile")
                  }
            }
        }
        .blur(radius: (viewRouter.signUpLoginView_active ? 3 : 0), opaque: true)
        .padding(viewRouter.signUpLoginView_active ? -20 : 0)
    }
}

Answer 1

仍然不清楚什么是什么（因为您谈论的是登录，但在代码 First/Second 中），但以下内容可能对如何操作视图之间的转换有所帮助。 （当然，您可以使用任何其他过渡或它们的组合）。

使用 Xcode 12 / iOS 14 测试

struct First: View {
    @EnvironmentObject var viewRouter: ViewRouter
    var body: some View {
        ZStack {
            Color.red
            Button("First View") {
               viewRouter.signUpLoginView_active.toggle()
            }
        }
    }
}

struct Second: View {
    @EnvironmentObject var viewRouter: ViewRouter
    var body: some View {
        ZStack {
            Color.orange
            Button("Second View") {
               viewRouter.signUpLoginView_active.toggle()
            }
        }

    }
}

struct ContentView: View {
    @EnvironmentObject var viewRouter: ViewRouter
    var body: some View {
        ZStack {
        if viewRouter.signUpLoginView_active {
            First()
               .transition(.move(edge: .top))   // transition here
        }
        if !viewRouter.signUpLoginView_active {
            Second()
                .blur(radius: viewRouter.signUpLoginView_active ? 3 : 0)
                .transition(.move(edge: .top)) // and here
        }
        }
        .animation(.easeInOut(duration: 3)) // animation on container
        .edgesIgnoringSafeArea(.all)
    }
}