'swiftui matchedGeometryEffect with scaleEffect problem

Why when opening and closing the viewModel (color.green) , the circle tremble and vibrate and the model becomes above the circle when moving when i change the viewModel (color.gree ) to another view become more annoying

When I remove scaleEffect and change .position to .frame in matchedGeometryEffect , the vibration decreases, but the movement is not nice

img : https://www.online-convert.com/fr/result#j=e9663e30-3fbd-402d-8b59-8067789e2fe2&qr=true

import SwiftUI

struct testView: View {

@Environment(\.safeAreaInsets) private var safeAreaInsets
@Namespace var nspace
@Namespace var nspace2

@State private var selectedI: DataModel? = nil
@State private var blur = false
let trueSize = UIScreen.main.bounds.size

@State private var off = 0.0
@State private var fixedminY = 0.0

@State private var DownUp  = true
@State private var DownUp2  = false

@State var showNotif = false
@State var showNotif2 = true

@State var scrolltoNotif = false

@State private var showingPopover = false
@State var tapClose = false

let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible()),
    ]

var body: some View {
    // --------------------------------------------------------
    // NavigationView with LazyVGrid
    // --------------------------------------------------------
    CustomNavBar(hide: selectedI != nil ? true : false, offset: .constant(300)) {
        CustumScrollView(axes: .vertical, showsIndicators: false, offsetChanged: { i in
        }){
            ScrollViewReader { px in
                VStack{
                    LazyVGrid(columns: columns, spacing: 40) {
                        ForEach(arr1.prefix(arr1.count/2),id: \.self){ i in
                            
                            if i != selectedI{
                                    
                                ZStack{
                                    Color.clear
                                        .frame(width: 90, height: 90)
                                        .matchedGeometryEffect(id: "S\(i.id)" ,in: nspace ,properties: .position) //,anchor: .bottom
                                }
                                .frame(width: 90, height: 90)
                                .overlay(
                                    VStack(spacing : 15){
                                        Button(action: {
                                            tapCircle(i)
                                            print(i.name)
                                        }) {
                                            Circle().fill(Color.gray)
                                            //PhotoProfile(item: i, dra: 240.0, offset: .constant(300))
                                                  .matchedGeometryEffect(id: "t\(i.id)", in: nspace2,properties: .frame)
                                        }
                                        .frame(width: 90, height: 90)
                                        .buttonStyle(GrowingButton2())
                                        
                                    }
                                )
                                .id(i.id)
                            
                            }else{
                                Circle().fill(Color.clear)
                                    .frame(width: 90, height: 90)
                            }
                            
                        }
                    }
                }
               
            }
            
        }
       
    }
    .disabled(blur ? true : false)

    .overlay(
        // --------------------------------------------------------
        // Modal view
        // --------------------------------------------------------
        ZStack{
            if self.selectedI != nil {
                Color.green
                //ModelView(item: self.selectedI!, onCloseTap: tapBackdrop, offset2: .constant(300), showlist: .constant(false))[enter image description here][1]
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .matchedGeometryEffect(id: "S\(self.selectedI!.id)"  , in: nspace ,properties: .position)
                    .scaleEffect(!tapClose ? 0 : 1, anchor: .center)
                    .onAppear(){
                        withAnimation(.hero) {
                            tapClose = true
                        }
                    }
                    .highPriorityGesture(TapGesture().onEnded({ _ in
                        withAnimation(.closerapid) {
                            tapClose = false
                        }
                        tapBackdrop()
                    }))
                    .overlay(
                        // --------------------------------------------------------
                        // Circle view
                        // --------------------------------------------------------
                        ZStack{
                            Circle().fill(Color.gray)
                                .matchedGeometryEffect(id: "t\(self.selectedI!.id)" , in: nspace2 ,properties: .frame)
                                .frame(width: 35, height: 35 )
                                .highPriorityGesture(TapGesture().onEnded({ _ in
                                    tapBackdrop()
                                }))
                        }
                        ,alignment: .topTrailing
                    )
            }
        }
      
    )

}
func tapBackdrop() {
    DispatchQueue.main.async {
        withAnimation(.close) {
            self.selectedI = nil
        }
    }
    
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
        self.blur = false
    }
}

func tapCircle(_ i: DataModel) {
    DispatchQueue.main.async {
        self.blur = true
    }
    
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.01){
        withAnimation(.hero) {
            self.selectedI = i
        }
       
    }
    
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.3){
        DownUp = true
    }
}

}



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source