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

hi, i copied and ran this demo at xcode 11.2,
and found that no transition effects on opening the form,
i recorded a short screen-shot here:

https://www.weiyun.com/video_preview?videoID=7be112f8-9711-436e-88b9-55bf7f3df317&fileName=IMG_6897.MOV&dirKey=d5685607e369b1badf4565554c2e2b6a&pdirKey=&shareKey=5wp7ber

Thanks for the amazing article and the demo. 👍

Thanks for sharing the video. As soon as I have some time, I will look into it. It seems Xcode 11.2 brought some under the hood changes :-( Cheers, Javier.-

…

On 11 Nov 2019, at 08:36, Levin Van ***@***.***> wrote: hi, i copied and ran this demo at xcode 11.2, and found that no transition effects on opening the form, i recorded a short screen-shot here: https://www.weiyun.com/video_preview?videoID=7be112f8-9711-436e-88b9-55bf7f3df317&fileName=IMG_6897.MOV&dirKey=d5685607e369b1badf4565554c2e2b6a&pdirKey=&shareKey=5wp7ber <https://www.weiyun.com/video_preview?videoID=7be112f8-9711-436e-88b9-55bf7f3df317&fileName=IMG_6897.MOV&dirKey=d5685607e369b1badf4565554c2e2b6a&pdirKey=&shareKey=5wp7ber> Thanks for the amazing article and the demo. 👍 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/a2fec9c4eff874e8ae21076763744335?email_source=notifications&email_token=AMW63V6MH7FSA37ZRG5VINTQTEDOFA5CNFSM4JLRWM3KYY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAF37BG#gistcomment-3079699>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMW63V6E42X5FJR4HWLHMQTQTEDOFANCNFSM4JLRWM3A>.

Hi Levin, I tested with Xcode 11.2.1 and 11.3 and the transition works fine. Unfortunately, I no longer have Xcode 11.2 to try. Have you upgraded your Xcode, does the problem persists for you? Cheers, Javier.-

…

On 11 Nov 2019, at 08:36, Levin Van ***@***.***> wrote: hi, i copied and ran this demo at xcode 11.2, and found that no transition effects on opening the form, i recorded a short screen-shot here: https://www.weiyun.com/video_preview?videoID=7be112f8-9711-436e-88b9-55bf7f3df317&fileName=IMG_6897.MOV&dirKey=d5685607e369b1badf4565554c2e2b6a&pdirKey=&shareKey=5wp7ber <https://www.weiyun.com/video_preview?videoID=7be112f8-9711-436e-88b9-55bf7f3df317&fileName=IMG_6897.MOV&dirKey=d5685607e369b1badf4565554c2e2b6a&pdirKey=&shareKey=5wp7ber> Thanks for the amazing article and the demo. 👍 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/a2fec9c4eff874e8ae21076763744335?email_source=notifications&email_token=AMW63V6MH7FSA37ZRG5VINTQTEDOFA5CNFSM4JLRWM3KYY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAF37BG#gistcomment-3079699>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMW63V6E42X5FJR4HWLHMQTQTEDOFANCNFSM4JLRWM3A>.

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()
}