SwiftUI 条件视图不会动画/过渡

lef*_*uce 16 xcode animation transition swift swiftui

我试图让我的视图使用.transition()on 视图进行动画/过渡。我从这里使用类似的代码并放入.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()
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

但是,每当我单击“登录”按钮(有或没有.transition())时,应用程序都会冻结一秒钟,然后Home()视图会突然出现而没有任何动画/过渡。我也试过换行self.isSignedIn = truewithAnimation但还是不行。任何想法或有更好的方法来做到这一点?

raf*_*nes 15

将您的.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)
  }
}
Run Code Online (Sandbox Code Playgroud)

然后,在触发条件变化的视图中的某处:

import SwiftUI

struct FirstRunView: View {

  @Binding var showFirstRun:Bool

  var body: some View {

    Button(action: {
      withAnimation {
        self.showFirstRun = false
      }
    }) {
      Text("Done")
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

  • 对我不起作用:( 我试图模仿 Google 地图应用程序,当您按下搜索字段时,会显示带有淡入淡出(不透明度)过渡的叠加视图。因此,只有当过渡应用于“第二个”视图并且仅呈现(没有动画就解散),但当它应用于 ZStack 时根本不起作用。 (3认同)

Tim*_*Tim 5

我不得不将我的if..else声明放在ZStack容器中而不是Group. Group在我的情况下,这似乎是动画损坏的主要原因。此外,我.transition.animation容器而不是视图结合使用。

ZStack {
  if(isSignedIn){
    Home()
  } else {
    AuthSignin(isSignedIn: self.$isSignedIn)
  }
}
.transition(.slide)
.animation(.easeInOut)
Run Code Online (Sandbox Code Playgroud)

  • 您必须注意 .zIndex()。如果将超过 1 个视图放入 ZStack,则可能会出现动画仅在出现时播放,而在消失时不播放的情况。其原因在于视图在 ZStack 中的位置。当一个视图被关闭时,它被放置在 ZStack 中所有其他视图的后面。为了避免任何类型的动画问题,请设置 ZStack 中每个视图的 .zIndex。还要避免使用 0 作为索引。 (5认同)
  • “ZStack”而不是“Group”成功了 - 谢谢。 (3认同)