SwiftUI 條件視圖不會動畫/過渡

Question

我正在嘗試使用.transition()對視圖進行動畫/轉換。 我使用這里的類似代碼並將.transition()放在兩個條件視圖中。

struct Base: View {
    @State private var isSignedIn = false

    var body: some View {
        Group {
            if(isSignedIn){
                Home().transition(.slide)
            }else{
                AuthSignin(isSignedIn: self.$isSignedIn).transition(.slide)
            }
        }
    }
}

struct AuthSignin: View {
    @Binding var isSignedIn: Bool

    var body: some View {
        VStack {
            Button(action: {
                self.isSignedIn = true
            }) {
                Text("Sign In")
                    .bold()
                    .frame(minWidth: CGFloat(0), maxWidth: .infinity)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(Color.white)
                    .cornerRadius(CGFloat(10))
            }.padding()
        }
    }
}

然而，每當我點擊“登錄”按鈕（有或沒有.transition() ）時，應用程序都會凍結一秒鍾，然后Home()視圖會突然出現而沒有任何動畫/過渡。 我也嘗試將self.isSignedIn = true包裝在withAnimation但它仍然無法正常工作。 任何想法或有更好的方法來做到這一點？

Answer 1

將您的.transition放在將切換的視圖的容器上，而不是每個條件視圖上。 這是我完成的一些代碼中的一個簡單示例（有效）。

在需要有條件轉換的主視圖中：

import SwiftUI

struct AppWrapperView: View {

  @State var showFirstRun:Bool = true

  var body: some View {
    ZStack {
      if (showFirstRun) {
        FirstRunView(showFirstRun: $showFirstRun)
      } else {
        Text("Some other view")
      }
    }
    .transition(.slide)
  }
}

然后，在觸發條件變化的視圖中的某處：

import SwiftUI

struct FirstRunView: View {

  @Binding var showFirstRun:Bool

  var body: some View {

    Button(action: {
      withAnimation {
        self.showFirstRun = false
      }
    }) {
      Text("Done")
    }
  }
}

Answer 2

我不得不將if..else語句放在ZStack容器而不是Group 。 在我的案例中，似乎Group是動畫損壞的主要原因。 另外，我施加.transition結合.animation到容器，而不是視圖。

ZStack {
  if(isSignedIn){
    Home()
  } else {
    AuthSignin(isSignedIn: self.$isSignedIn)
  }
}
.transition(.slide)
.animation(.easeInOut)

Answer 3

將 WithAnimation 放在 self.isSignedIn = true 之前