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