15.2 C
London
Sunday, September 8, 2024

ios – SwiftUI .matchGeometryEffect not working easily


I have been making an attempt for someday now to determine why the .matchGeometryEffect isn’t transitioning easily in my use case. The state change velocity isn’t constant, rising faster and going again slower. Equally, the transition can also be damaged for going again and clipping. Additionally I want to keep away from the fading impact in the long run.

I arrange an instance that represents the problem. Any recommendation could be a lot appreciated.

issue showcase example

struct PeopleView: View {
    
    struct Individual: Identifiable {
        let id: UUID = UUID()
        let first: String
        let final: String
    }
    
    @Namespace var animationNamespace
    
    @State personal var isDetailPresented = false
    @State personal var selectedPerson: Individual? = nil
    
    let folks: [Person] = [
        Person(first: "John", last: "Doe"),
        Person(first: "Jane", last: "Doe")
    ]
    
    var physique: some View {
        homeView
            .overlay {
                if isDetailPresented, let selectedPerson {
                    detailView(individual: selectedPerson)
                        .transition(.uneven(insertion: .identification, removing: .offset(y: 5)))
                }
            }
    }
    
    var homeView: some View {
        ScrollView {
            VStack {
                cardScrollView
            }
        }
    }
    
    var cardScrollView: some View {
        ScrollView(.horizontal) {
            HStack {
                ForEach(folks) { individual in
                    if !isDetailPresented {
                        personView(individual: individual, measurement: 100)
                            .onTapGesture {
                                withAnimation(.interactiveSpring(response: 0.3, dampingFraction: 0.8, blendDuration: 0.8)){
                                    self.selectedPerson = individual
                                    self.isDetailPresented = true
                                }
                            }
                    }
                    else {
                        Rectangle()
                            .body(width: 50, peak: 100)
                    }
                }
            }
        }
    }
    
    func personView(individual: Individual, measurement: CGFloat) -> some View {
        Group {
            Textual content(individual.first)
                .padding()
                .body(peak: measurement)
                .background(Colour.grey)
                .cornerRadius(5)
                .shadow(radius: 5)
        }
        .matchedGeometryEffect(id: individual.id, in: animationNamespace)
    }
    
    func detailView(individual: Individual) -> some View {
        VStack {
            personView(individual: individual, measurement: 300)
            Textual content(individual.first + " " + individual.final)
        }
        .onTapGesture {
            withAnimation {
                self.isDetailPresented = false
                self.selectedPerson = nil
            }
        }
    }
}

Latest news
Related news

LEAVE A REPLY

Please enter your comment!
Please enter your name here