How can I remove/control fade effect from matchedGeometryEffect?-CodePudding

I have a test code to show the issue, when I am using matchedGeometryEffect, matchedGeometryEffect adds an unwished effect of fade to rendered result, so I like to remove this fading effect or even control it. It could be a good thing when I change the Color of view from one color to other, but in my case it is not good, because the Color is black in all the time.

struct ContentView: View {
    
    @Namespace var animationNamespaceon
    @State private var start: Bool = Bool()
    
    var body: some View {
        
        VStack {
            
            Spacer()
            
            circle
            
            Spacer()
            
            Button("update") { start.toggle() }
            
        }
        .animation(Animation.linear(duration: 3), value: start)

    }
    
   @ViewBuilder var circle: some View {
        if start {
            
            Circle()
                .foregroundColor(Color.black)
                .matchedGeometryEffect(id: "Circle", in: animationNamespaceon)
                .frame(width: 300, height: 300)


        }
        else {
            Circle()
                .foregroundColor(Color.black)
                .matchedGeometryEffect(id: "Circle", in: animationNamespaceon)
                .frame(width: 50, height: 50)
                
        }
    }
}

CodePudding user response：

This is an effect of default .transition(.opacity) which is applied when view is removed from (inserted to) view hierarchy.

I assume you need linear scale transition instead, like

    if start {
        Circle()
            .foregroundColor(Color.black)
            .matchedGeometryEffect(id: "Circle", in: animationNamespaceon)
            .transition(.scale(scale: 1))
            .frame(width: 300, height: 300)
    }
    else {
        Circle()
            .foregroundColor(Color.black)
            .matchedGeometryEffect(id: "Circle", in: animationNamespaceon)
            .transition(.scale(scale: 1))
            .frame(width: 50, height: 50)
    }

Tested with Xcode 13 / iOS 15