CODEWITHSUNDEEP
iosswiftui
Candy
Candy

Reputation: 457

How to create animation with delay when dismiss view swiftui

I used the following example ( iOS SwiftUI: pop or dismiss view programmatically ) in my code, but I don't know how to create an animation just like flipping a page and put several seconds delay when [Button] tapped.Does anyone know a solution?

struct DetailView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    var body: some View {
        Button(
            "Here is Detail View. Tap to go back.",
            action: {

                //withAnimation(.linear(duration: 5).delay(5))// Error occurred in dalay.(Type of expression is ambiguous without more context)
                withAnimation(.linear(duration: 5)) // not work 
                {
                    self.presentationMode.wrappedValue.dismiss()
                }
        }
        )
    }
}

struct RootView: View {
    var body: some View {
        VStack {
            NavigationLink(destination: DetailView())
            { Text("I am Root. Tap for Detail View.")
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            RootView()
        }
    }
}

Upvotes: 4

Views: 12283

Answers (2)

E.Coms
E.Coms

Reputation: 11531

You can dispatchQueue delay?

    Button(
        "Here is Detail View. Tap to go back.",
        action: {
            DispatchQueue.main.asyncAfter(deadline: .now() + 5.0) {
                self.presentationMode.wrappedValue.dismiss()

            }})

Upvotes: 1

simibac
simibac

Reputation: 8570

This would be one way to do it. Without the NavigationLink you have full control over all animations and transitions.

struct DetailView: View {
    @Binding var showDetail:Bool

    var body: some View {
        Button(
            "Here is Detail View. Tap to go back.",
            action: {
                withAnimation(Animation.linear.delay(2)){
                    self.showDetail = false
                }
            }
        ).frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).background(Color.yellow)
    }
}

struct RootView: View {
    @State var showDetail = false

    var body: some View {
        VStack {
            if showDetail{
                DetailView(showDetail:self.$showDetail).transition(.move(edge: .trailing))
            }else{
                Button("I am Root. Tap for Detail View."){
                    withAnimation(.linear){
                        self.showDetail = true
                    }
                }
            }
        }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).background(Color.red)
    }
}

Upvotes: 10

Related Questions