swift - SwiftUI 中的动画无法正常工作

Question

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

我最终要实现的是:

1. SignUpLogin 屏幕同时具有 .move(edge: .top) 和 .opacity出现和消失

   时的动画

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

模糊和不透明度在 View 重新出现时停止工作(但它们在消失时起作用，请参见 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

仍然不清楚什么是什么(因为您谈论的是登录，但在代码中是第一/第二)，但以下内容可能对如何处理 View 之间的转换有所帮助。 (当然，您可以使用任何其他过渡或它们的组合)。

使用 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)
    }
}