ios – SwiftUI Matched Geometry Impact: Transition Between Rounded Rectangles with Completely different Nook Radii

In SwiftUI, I am working with two screens, Display A and Display B. I am trying to create a transition impact utilizing SwiftUI’s matched geometry characteristic. The transition includes two rounded rectangles: one on Display A, which seems as a circle because of its nook radius and dimension, and one other on Display B with a zero nook radius, serving because the background.

Anticipated Habits:

I anticipated the animation would show as a seamless morphing of a single object from one configuration to a different, particularly altering the nook radius, peak, and width.

Precise Habits:

Nonetheless, the transition appears to be extra of a crossfade. The supply form animates its nook radius in the direction of the goal configuration, however the goal form, fading in with a static zero nook radius, would not animate from the supply radius.

Minimal Instance Code:

Essential Display:

enum Display {
    case primary, goal
}

@Observable
class Nav {
    var display:Display = .primary
}

struct ContentView: View {
    
    @Atmosphere(Nav.self) var navController
    
    // matched geometry
    @Namespace var namespace
    
    var physique: some View {
        
        swap navController.display {
        case .primary:
            ZStack{
                RoundedRectangle(cornerRadius: 15)
                    .fill(Colour.inexperienced)
                    .matchedGeometryEffect(id: "circleToBackground", in: namespace)
                    .body(width: 30, peak: 30)
                    .onTapGesture {
                        withAnimation(.easeInOut(period: 4.0)){
                            navController.display = .goal
                        }
                    }
            }
            
        case .goal:
            TargetScreen(namespace: namespace)
        }
        
    }
}

Goal Display:

struct TargetScreen: View {
    
    let namespace: Namespace.ID
    @Atmosphere(Nav.self) var navController
    
    var physique: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 0)
                .fill(LinearGradient(colours: [Color.green, Color.white], startPoint: UnitPoint(x:0.5,y:0.0), endPoint: UnitPoint(x:0.5,y:1.0)))
                .matchedGeometryEffect(id: "circleToBackground", in: namespace)
                .body(maxWidth: .infinity, maxHeight: .infinity)
            
            Textual content("BACK").onTapGesture {
                withAnimation {
                    navController.display = .primary
                }
            }
        }
    }
    
}