Friday, October 7, 2022
HomeiOS Developmentios - Matched Geometry Impact backward animation appears to be behind view

ios – Matched Geometry Impact backward animation appears to be behind view


I am making an attempt to make use of the matched geometry impact on a listing and it’s working like anticipated at the very least for the animation to the element view.
The issue is that the animation again from the element view to checklist checklist cell appears to be behind the checklist.

enter image description here

How can I get this working correctly in order that the element view will shrink again to a listing cell?
This is the code for my cell:

struct Cell: View {

var train: Train
var index: Int
var namespace: Namespace.ID

var physique: some View {
    VStack {
        Textual content(train.title)
            .matchedGeometryEffect(id: train.id, in: namespace)
            .font(.title)
            .foregroundColor(.white)
            .body(maxWidth: .infinity, alignment: .main)
            .body(top: 100)
    }
    .padding(.horizontal)
    .padding(.high)
    .padding(.backside, 4)
    .background(
        RoundedRectangle(cornerRadius: 5, model: .steady)
            .matchedGeometryEffect(id: train.id + "background", in: namespace)
            .background(Colour.clear)
            .foregroundColor(Colour.grey)
    )
    .clipped()
}
}

That is the checklist itself:

struct ListView: View {

var testData: [Exercise]
var namespace: Namespace.ID
@Binding var tappedCellIndex: Int?

var physique: some View {
    ScrollView {
        LazyVStack {
            ForEach(testData.indices) { index in
                Cell(train: testData[index], index: index, namespace: namespace)
                .onTapGesture {
                    withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) {
                        self.tappedCellIndex = index
                    }
                }
            }
        }
    }
}
}

That is the Content material View:

struct ContentView: View {
let testData = [Exercise(title: "Hallo"), Exercise(title: "Bankdrücken"), Exercise(title: "Squats"), Exercise(title: "Seitheben"), Exercise(title: "Klimmzüge"), Exercise(title: "Bizepscurls"), Exercise(title: "Dips"), Exercise(title: "Aufroller"), Exercise(title: "Muscle"), Exercise(title: "Dragon Flies"), Exercise(title: "Hallo"), Exercise(title: "Bankdrücken"), Exercise(title: "Squats"), Exercise(title: "Seitheben"), Exercise(title: "Klimmzüge"), Exercise(title: "Bizepscurls"), Exercise(title: "Dips"), Exercise(title: "Aufroller"), Exercise(title: "Muscle"), Exercise(title: "Dragon Flies")]

@State var tappedCellIndex: Int? = nil
@Namespace var namespace

var physique: some View {
    ZStack {
        VStack {
            ListView(testData: testData, namespace: namespace, tappedCellIndex: $tappedCellIndex)
                .opacity(tappedCellIndex == nil ? 1 : 0)
                .transition(.scale(scale: 1))
        }
        
        if let tappedCellIndex = tappedCellIndex {
            DetailView(train: testData[tappedCellIndex], selectedIndex: $tappedCellIndex, namespace: namespace)
                .transition(.scale(scale: 1))
        }
    }
}
}

That is the element view from the place it ought to animate again:

struct DetailView: View {

var train: Train
@Binding var selectedIndex: Int?
var namespace: Namespace.ID

var physique: some View {
    VStack(alignment: .main) {
        HStack {
            Textual content(train.title)
                .matchedGeometryEffect(id: train.id, in: namespace)
                .font(.title)
                .body(maxWidth: .infinity, alignment: .main)
                .foregroundColor(Colour.white)
                .padding(.high, 12)
            Spacer()
            Button {
                withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) {
                    selectedIndex = nil
                }
            } label: {
                Textual content("Klicke hier!")
            }
        }

        Spacer()
    }
    .body(maxWidth: .infinity, maxHeight: .infinity)
    .padding()
    .background(
        RoundedRectangle(cornerRadius: 30, model: .steady)
            .matchedGeometryEffect(id: train.id + "background", in: namespace)
            .foregroundColor(Colour.grey)
    )
}
}

And at last that is the mannequin:

struct Train: Identifiable, Hashable, Equatable {
var id = UUID().uuidString
var title: String

static func == (lhs: Train, rhs: Train) -> Bool {
    return lhs.id == rhs.id
}

func hash(into hasher: inout Hasher) {
    hasher.mix(id)
}

}

sorry for that a lot code. I hope I added all that’s wanted.

btw: I additionally get the error “A number of inserted views in matched geometry group”. I believe that’s as a result of I do not cover the checklist when displaying the element view.
I learn completely different opinions on this right here on stackoverflow and it appears to me thats its not in each case essential to cover one view when one other one is displayed and I possibly can ignore the error message.

I additionally cant cover the checklist as a result of a reload would refresh the checklist and I’ll begin on the high of the checklist once more so the backward animation additionally will not work.

I’d admire any assist

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

eleven − seven =

Most Popular

Recent Comments