全屏封面/模态的替代动画 - iOS 14

Question

有没有办法在 SwiftUI 中为新的全屏模式 iOS 14 使用替代动画？

目前它从底部向上滑动，但我想要交叉溶解。我已经尝试了几件事，但没有运气。我认为新的matchedGeometryEffect()修饰符可能有用。

下面是这个新功能的默认使用

struct ContentView: View {

    @State private var isShowing = false

    var body: some View {
        Button {
            isShowing.toggle()
        } label: {
            Text("Show Modal").font(.largeTitle)
        }.fullScreenCover(isPresented: $isShowing) {
            Text("Hello").font(.largeTitle)
        }
    }
}

Answer 1

因此，为了回答您的问题，让我们首先深入探讨问题。

您需要以与默认全屏封面不同的过渡来显示您的视图。如果是，那么这就是解决方案。

选项 1：简单（适合初学者）

    struct ContentView: View {
    
    @State private var isShowing = false
    
    var body: some View {
        ZStack {
            if(!isShowing) {
                    Button {
                        withAnimation {
                        
                        isShowing.toggle()
                        }
                    } label: {
                        Text("Show Modal").font(.largeTitle)
                    }
            } else {
                VStack {
                Text("Hello").font(.largeTitle)
                    Button(action: {
                        withAnimation {
                        isShowing.toggle()
                        }
                    }) {
                        Text("Go back")
                    }
                }
                .frame(width: 400, height: 900) //recommended - adjust this frame size according to you dynamically
                .background(Color.red)
                .transition(.slide) // you can use other transition like .move ,etc.
            }
            
        }
    } }

选项 2：高级

1. 将过渡添加到您的视图中，并使该视图框架覆盖整个屏幕或您想要覆盖的部分。要了解有关转换的更多信息，请查看此处 - /sf/answers/4393692691/。您可以采取一个想法来创建自定义过渡。

2. 将此自定义过渡添加到您的视图，条件如下

   struct ContentView: View {
   
   @State private var isShowing = false
   
   var body: some View {
       ZStack {
           if(!isShowing) {
                   Button {
                       withAnimation {
   
                       isShowing.toggle()
                       }
                   } label: {
                       Text("Show Modal").font(.largeTitle)
                   }
           } else {
               VStack {
               Text("Hello").font(.largeTitle)
                   Button(action: {
                       withAnimation {
                       isShowing.toggle()
                       }
                   }) {
                       Text("Go back")
                   }
               }
               .frame(width: 400, height: 900) //recommended - adjust this frame size according to you dynamically
               .background(Color.red)
               .transition(.rotate) //custom transition rotate from the link shared in 1st point. You can use inbuilt transition like .transition(.slide) and many more
           }
   
       }
   } }
   

在这里，我使用.rotate上面共享的链接中的自定义动画，但您可以使用其他内置过渡或根据您的要求进行自定义过渡。