Alternative animation for fullscreen cover / modal - iOS 14

user_1173037 0
Viewed 8162

Is there a way to use an alternative animation for the new fullscreen modal is iOS 14 in SwiftUI?

At present it slides up from the bottom, but I'd like crossdissolve. I've tried a few things but no luck. I'm thinking the new matchedGeometryEffect() modifier might be of use.

Below is the default use of this new feature

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)
        }
    }
}
ios14 swiftui animation
3 Answers

Right now there is no direct API to do this but you can have a simple hack using ZStack to solve this issue

The bellow code works just fine as an alternate

@State var isPresented = false

var body: some View {
    
    ZStack {
        
        NavigationView {
            VStack {
                
                Button(action: {
                    // trigger modal presentation
                    withAnimation {
                        self.isPresented.toggle()
                    }
                    
                }, label: {
                    Text("Show standard modal")
                })
                
            }.navigationBarTitle("Standard")
        }
        
        ZStack {
            HStack {
                Spacer()
                VStack {
                    
                    HStack {
                        Button(action: {
                            // trigger modal presentation
                            withAnimation {
                                self.isPresented.toggle()
                            }
                            
                        }, label: {
                            Text("Dismiss")
                                .font(.headline)
                                .foregroundColor(.white)
                        })
                        Spacer()
                        
                        Image(systemName: "xmark.circle.fill")
                            .foregroundColor(.white)
                            .onTapGesture {
                                withAnimation {
                                    self.isPresented.toggle()
                                }
                        }
                    }
                    
                    
                        .padding(.top, UIApplication.shared.windows.filter{$0.isKeyWindow}.first?.safeAreaInsets.top)
                    Spacer()
                }
                Spacer()
            }
            
            
            
        }.background(Color.yellow)
            .edgesIgnoringSafeArea(.all)
            .offset(x: 0, y: self.isPresented ? 0 : UIApplication.shared.keyWindow?.frame.height ?? 0)
         
        
    }
    
}
user_45956740

Code bellow works, with matchedGeometryEffect() that you are after.

Its harcoded for now, as I still haven't figure out how to pass data from List-> Detail. If you do, please let me know! ; )

import SwiftUI




struct Grid: View {
    
    let namespace: Namespace.ID
    
    var body: some View {
        
        List{
           Image("cover")
                .resizable()
                .frame(width: 50, height: 50)
                .cornerRadius(4)
                .padding()
                .matchedGeometryEffect(id: "animation", in: namespace)
            
            Image("cover2")
                 .resizable()
                 .frame(width: 50, height: 50)
                 .cornerRadius(4)
                 .padding()
                 .matchedGeometryEffect(id: "animation", in: namespace)
        }

   }
}

struct Detail: View {
    
    let namespace: Namespace.ID
    
    var body: some View {
        
            Image("cover")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .cornerRadius(10)
                .padding(40)
                .matchedGeometryEffect(id: "animation", in: namespace)
        
      
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(#colorLiteral(red: 0.234857142, green: 0.043259345, blue: 0.04711621255, alpha: 1)))
    }
}

struct ContentView: View {
    
    @Namespace private var ns
    @State private var showDetails: Bool = false
    
    var body: some View {
        ZStack {
            Spacer()
            if showDetails {
                Detail(namespace: ns)
            }
            else {
                Grid(namespace: ns)
            }
        }
        .onTapGesture {
            withAnimation(.spring()) {
                showDetails.toggle()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
user_73081460

So to answer your question, let's dive into problem first.

You need to show your view with different transition from default fullscreencover. If yes then here is the solution.

Option 1: straightforward( for beginners)

    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.
            }
            
        }
    } }

Option 2: Advanced

  1. Add Transition to your view and make this view frame to cover whole screen or the part you want to cover. To know more about transition look here - https://stackoverflow.com/a/62767038 . You can take an idea to create custom transition.

  2. Add this custom transition to your view with condition like below

    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
        }

    }
} }

Here I'm using custom animation .rotate from the link shared above but you can use other inbuilt transition or make your custom transition as per your requirement.

user_121370300
Related