transiftion-present-dismiss.swift

// Advanced SwiftUI Transitions
// https://swiftui-lab.com
// https://swiftui-lab.com/advanced-transitions

import SwiftUI

struct GeometryEffectTransitionsDemo: View {
    @State private var show = false
    
    var body: some View {
        
        return ZStack {
            Button("Open Booking") {
                withAnimation(.easeInOut(duration: 0.8)) {
                    self.show = true
                }
            }
            
            if show {
                RoundedRectangle(cornerRadius: 15)
                    .fill(Color.pink).overlay(MyForm(show: $show))
                    .frame(width: 400, height: 500)
                    .shadow(color: .black, radius: 3)
                    .transition(.fly)
                    .zIndex(1)
            }
        }
    }
}

struct MyForm: View {
    @Binding var show: Bool

    @State private var departure = Date()
    @State private var checkin = Date()

    @State private var pets = true
    @State private var nonsmoking = true
    @State private var airport: Double = 7.3
    
    var body: some View {

        VStack {
            Text("Booking").font(.title).foregroundColor(.white)

            Form {
                DatePicker(selection: $departure, label: {
                    HStack {
                        Image(systemName: "airplane")
                        Text("Departure")
                    }
                })

                DatePicker(selection: $checkin, label: {
                    HStack {
                        Image(systemName: "house.fill")
                        Text("Check-In")
                    }
                })
                
                Toggle(isOn: $pets, label: { HStack { Image(systemName: "hare.fill"); Text("Have Pets") } })
                Toggle(isOn: $nonsmoking, label: { HStack { Image(systemName: "nosign"); Text("Non-Smoking") } })
                Text("Max Distance to Airport \(String(format: "%.2f", self.airport as Double)) km")
                Slider(value: $airport, in: 0...10) { EmptyView() }
                
                Button(action: {
                    withAnimation(.easeInOut(duration: 1.0)) {
                        self.show = false
                    }
                }) {
                    HStack { Spacer(); Text("Save"); Spacer() }
                }
                
            }
        }.padding(20)
    }
}

extension AnyTransition {
    static var fly: AnyTransition { get {
        AnyTransition.modifier(active: FlyTransition(pct: 0), identity: FlyTransition(pct: 1))
        }
    }
}

struct FlyTransition: GeometryEffect {
    var pct: Double
    
    var animatableData: Double {
        get { pct }
        set { pct = newValue }
    }
    
    func effectValue(size: CGSize) -> ProjectionTransform {

        let rotationPercent = pct
        let a = CGFloat(Angle(degrees: 90 * (1-rotationPercent)).radians)
        
        var transform3d = CATransform3DIdentity;
        transform3d.m34 = -1/max(size.width, size.height)
        
        transform3d = CATransform3DRotate(transform3d, a, 1, 0, 0)
        transform3d = CATransform3DTranslate(transform3d, -size.width/2.0, -size.height/2.0, 0)
        
        let affineTransform1 = ProjectionTransform(CGAffineTransform(translationX: size.width/2.0, y: size.height / 2.0))
        let affineTransform2 = ProjectionTransform(CGAffineTransform(scaleX: CGFloat(pct * 2), y: CGFloat(pct * 2)))
        
        if pct <= 0.5 {
            return ProjectionTransform(transform3d).concatenating(affineTransform2).concatenating(affineTransform1)
        } else {
            return ProjectionTransform(transform3d).concatenating(affineTransform1)
        }
    }
}

I removed the line with .zIndex(1) noticed that the fly transition would not animate in the "dismissal phase" (the view would still animate when it appeared). I couldn't ascertain why this is required from the documentation (and I don't believe you mentioned this in your post). Could you please explain the need for this? Also, if you noticed the view from failing to animate appropriately during the development process, how did you go about debugging in order to reach the above conclusion?

there is a strange blinking in the start of animation, and message in console

ignoring singular matrix: ProjectionTransform(m11: 0.0, m12: 0.0,
m13: 0.0, m21: -0.33361111111111114, m22: -0.5, m23: -0.0016666666666666668, 
m31: 300.25, m32: 450.0, m33: 1.5)

I solved this by changing active transition from FlyTransition(pct: 0.0) to FlyTransition(pct: 0.001) + some changes in DatePicker size...

updated version:

import SwiftUI

struct GeometryEffectTransitionsDemo: View {
    @State private var show = false

    var body: some View {
        return ZStack {
            Button("Open Booking") {
                withAnimation(.easeInOut(duration: 0.8)) {
                    self.show = true
                }
            }
            if show {
                RoundedRectangle(cornerRadius: 15)
                    .fill(Color.pink).overlay(MyForm(show: $show))
                    .frame(width: 400, height: 600)
                    .shadow(color: .black, radius: 3)
                    .transition(.fly)
                    .zIndex(1)
            }
        }
    }
}

struct MyForm: View {
    @Binding var show: Bool

    @State private var departure = Date()
    @State private var checkin = Date()

    @State private var pets = true
    @State private var nonsmoking = true
    @State private var airport: Double = 7.3

    var body: some View {
        VStack {
            Text("Booking").font(.title).foregroundColor(.white)

            Form {
                VStack(alignment: .leading, spacing: 4) {
                    HStack {
                        Image(systemName: "airplane")
                        Text("Departure")
                    }
                    DatePicker("", selection: $departure).labelsHidden()
                        .frame(maxWidth: .infinity, alignment: .leading)
                }

                VStack(alignment: .leading, spacing: 4) {
                    HStack {
                        Image(systemName: "house.fill")
                        Text("Check-In")
                    }
                    DatePicker("", selection: $checkin).labelsHidden()
                        .frame(maxWidth: .infinity, alignment: .leading)

                }

                Toggle(isOn: $pets) {
                    HStack {
                        Image(systemName: "hare.fill")
                        Text("Have Pets")
                    }
                }

                Toggle(isOn: $nonsmoking) {
                    HStack {
                        Image(systemName: "nosign")
                        Text("Non-Smoking")
                    }
                }

                Text("Max Distance to Airport \(String(format: "%.2f", self.airport as Double)) km")
                Slider(value: $airport, in: 0...10) { EmptyView() }

                Button(action: {
                    withAnimation(.easeInOut(duration: 1.0)) {
                        self.show = false
                    }
                }) {
                    HStack { Spacer(); Text("Save"); Spacer() }
                }
            }
        }
        .padding(20)
    }
}

extension AnyTransition {
    static var fly: AnyTransition {
        get {
            AnyTransition.modifier(active: FlyTransition(pct: 0.0), identity: FlyTransition(pct: 1))
        }
    }
}

struct FlyTransition: GeometryEffect {
    var pct: Double

    var animatableData: Double {
        get { pct }
        set { pct = newValue }
    }

    func effectValue(size: CGSize) -> ProjectionTransform {
        let rotationPercent = pct
        let a = CGFloat(Angle(degrees: 90 * (1 - rotationPercent)).radians)

        var transform3d = CATransform3DIdentity
        transform3d.m34 = -1 / max(size.width, size.height)

        transform3d = CATransform3DRotate(transform3d, a, 1, 0, 0)
        transform3d = CATransform3DTranslate(transform3d, -size.width/2.0, -size.height/2.0, 0)

        let affineTransform1 = ProjectionTransform(CGAffineTransform(translationX: size.width/2.0, y: size.height/2.0))
        let affineTransform2 = ProjectionTransform(CGAffineTransform(scaleX: CGFloat(pct * 2), y: CGFloat(pct * 2)))

        if pct <= 0.5 {
            return ProjectionTransform(transform3d).concatenating(affineTransform2).concatenating(affineTransform1)
        } else {
            return ProjectionTransform(transform3d).concatenating(affineTransform1)
        }
    }
}

#Preview {
    GeometryEffectTransitionsDemo()
}