SwiftUI transition animation glitches when clicking too fast

Question

I'm using a hero animation to connect a card style view and a detail page. The animation works fine when I click the card and go to the detail page. However when I close the detail page, if I click the card again in a really short time, the image will lose track.

GIF of this glitch

Here is related code:

Animation for the card:

ForEach (detailPageViewModel.HomepageList1){ recipeDets in
    HomePageCard(recipeDetail: recipeDets, animation: animation)
        .environmentObject(unitSelectionViewModel)
        .onTapGesture {
            withAnimation(.interactiveSpring(response: 0.5, dampingFraction: 0.8, blendDuration: 0.8)){
            detailPageViewModel.selectedRecipe = recipeDets
            detailPageViewModel.show.toggle()
        }
    }
}

The code of the card view:

        VStack{
            
            LazyImage(url: URL(string: recipeDetail.fullImagePath))
                .matchedGeometryEffect(id: recipeDetail.fullImagePath, in: animation)
                .aspectRatio(contentMode: .fill)
                
                
                
            HStack{
                VStack(alignment: .leading) {
                    Text(unitConverter(calorie: recipeDetail.calorie, unit: unitSelectionViewModel)) // should be determined by the sorting conditions in the settings.
                        .font(.headline)
                        .foregroundColor(.secondary)
                    Text(recipeDetail.name)
                        .font(.title)
                        .fontWeight(.black)
                        .foregroundColor(.primary)
                        .lineLimit(3)
                    Text(shortDescriptionGenerator(recipeDetail.description))
                        .foregroundColor(.secondary)
                }
                .layoutPriority(100)
                Spacer()
            }
            .matchedGeometryEffect(id: recipeDetail.id, in: animation)
            .padding()
        }

The code for the detail page:

ZStack {
                
                LazyImage(url: URL(string: detailPageViewModel.selectedRecipe.fullImagePath), resizingMode: .aspectFill)
                    .matchedGeometryEffect(id: detailPageViewModel.selectedRecipe.fullImagePath, in: animation)
                    .aspectRatio(contentMode: .fit)
                    .ignoresSafeArea()
                
                VStack{
                    HStack {
                        Spacer()
                        Button(action: {
                            withAnimation(.interactiveSpring(response: 0.4, dampingFraction: 0.8, blendDuration: 0.8)){
                                                            detailPageViewModel.show.toggle()
                            }
                        }){
                            Image(systemName: "xmark")
                                .imageScale(.medium)
                                .foregroundColor(Color.black.opacity(0.7))
                                .padding()
                                .background(Color.white.opacity(0.7))
                                .clipShape(Circle())
                        }
                        
                        
                    }.padding()
                    Spacer()
                    
                }
                    
            }

I tried to modify the response parameter in the detail page to a smaller value, it does make this bug hard to trigger. However it also makes the animation less smoother. Is there any other ways to prevent user from clicking the image before the animation is over?

SwiftUI transition animation glitches when clicking too fast

0 Answers0