matchedGeometryEffect in iOS Swift - Mini App: Build & Ship

Build: Matched Geometry Effect Demo

This screen shows two colored squares. When you tap one, it smoothly moves and changes shape to the other position using matchedGeometryEffect.

Target UI

┌───────────────────────────────┐
│ Matched Geometry Effect Demo   │
├───────────────────────────────┤
│ [■]                           │
│                               │
│                   [■]         │
│                               │
│ Tap a square to animate it     │
└───────────────────────────────┘

Display two squares side by side with different colors

When user taps a square, it animates smoothly to the other square's position and shape

Use matchedGeometryEffect with a shared namespace for the animation

Toggle the squares' positions on each tap

Starter Code

iOS Swift

import SwiftUI

struct MatchedGeometryEffectDemo: View {
    @Namespace private var animationNamespace
    @State private var isToggled = false

    var body: some View {
        HStack {
            if !isToggled {
                Color.blue
                    .frame(width: 100, height: 100)
                    .matchedGeometryEffect(id: "square", in: animationNamespace)
                    .onTapGesture {
                        isToggled.toggle()
                    }
                Spacer()
                Color.red
                    .frame(width: 100, height: 100)
            } else {
                Color.red
                    .frame(width: 100, height: 100)
                Spacer()
                Color.blue
                    .frame(width: 100, height: 100)
                    .matchedGeometryEffect(id: "square", in: animationNamespace)
                    .onTapGesture {
                        isToggled.toggle()
                    }
            }
        }
        .padding()
        .animation(.easeInOut, value: isToggled)
    }
}

struct MatchedGeometryEffectDemo_Previews: PreviewProvider {
    static var previews: some View {
        MatchedGeometryEffectDemo()
    }
}

Task 1

Solution

iOS Swift

import SwiftUI

struct MatchedGeometryEffectDemo: View {
    @Namespace private var animationNamespace
    @State private var isToggled = false

    var body: some View {
        HStack {
            if !isToggled {
                Color.blue
                    .frame(width: 100, height: 100)
                    .matchedGeometryEffect(id: "square", in: animationNamespace)
                    .onTapGesture {
                        isToggled.toggle()
                    }
                Spacer()
                Color.red
                    .frame(width: 100, height: 100)
            } else {
                Color.red
                    .frame(width: 100, height: 100)
                Spacer()
                Color.blue
                    .frame(width: 100, height: 100)
                    .matchedGeometryEffect(id: "square", in: animationNamespace)
                    .onTapGesture {
                        isToggled.toggle()
                    }
            }
        }
        .padding()
        .animation(.easeInOut, value: isToggled)
    }
}

struct MatchedGeometryEffectDemo_Previews: PreviewProvider {
    static var previews: some View {
        MatchedGeometryEffectDemo()
    }
}

This code uses matchedGeometryEffect to link the blue square's position and size between two places in the layout. When you tap the blue square, the isToggled state changes, switching the squares' positions. The matchedGeometryEffect with the same id and Namespace makes the blue square animate smoothly from one side to the other. The red square stays static. The animation uses .easeInOut for a smooth effect.

This is like moving a toy block from one hand to another, and you see it glide smoothly instead of jumping.

Final Result

Completed Screen

┌───────────────────────────────┐
│ Matched Geometry Effect Demo   │
├───────────────────────────────┤
│ [■]                           │
│                               │
│                   [■]         │
│                               │
│ Tap a square to animate it     │
└───────────────────────────────┘

Tap the blue square on the left to see it smoothly move to the right side

Tap the blue square on the right to move it back to the left

The red square stays in place without animation

Stretch Goal

Add a shape change animation so the blue square becomes a circle when moved

💡 Hint

Use a conditional modifier like .clipShape(Circle()) based on isToggled state and include it inside the matchedGeometryEffect animation