SwiftUI中的动画无法正常工作

如何解决SwiftUI中的动画无法正常工作

有人知道为什么以下内容不是动画并且不能完全起作用吗？如何解决该问题？问题是在这种情况下我们的某些动画没有显示。也许有解决方法？ 我已经读了好几个小时等等的文章……什么都没找到

我最终想要实现的是：

1. SignUpLogin屏幕在出现和而消失的同时具有.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)
    }
}

解决方法

仍然不清楚什么是什么（因为您谈论的是Login，但在代码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)
    }
}