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

Practice

1. What is the main purpose of matchedGeometryEffect in SwiftUI?

easy

A. To manage data persistence

B. To create a new view from scratch

C. To handle user input events

D. To link two views for smooth animations between them

Solution

1. Step 1: Understand matchedGeometryEffect usage

   This modifier connects two views by their id and namespace to animate changes smoothly.

2. Step 2: Identify the purpose

   It is used specifically for animating transitions in position, size, or shape between views.

3. Final Answer:

   To link two views for smooth animations between them -> Option D

4. Quick Check:

   matchedGeometryEffect = link views for animation [OK]

Hint: matchedGeometryEffect connects views for smooth animations [OK]

Common Mistakes:

• Thinking it creates new views
• Confusing it with event handling
• Assuming it manages data

2. Which of the following is the correct way to apply matchedGeometryEffect to a view in SwiftUI?

easy

A. view.matchedGeometryEffect("uniqueID", ns)

B. view.matchedGeometryEffect(id: "uniqueID", namespace: ns)

C. view.matchedGeometryEffect(id: ns, namespace: "uniqueID")

D. view.matchedGeometryEffect(namespace: "uniqueID", id: ns)

Solution

1. Step 1: Recall matchedGeometryEffect syntax

   The correct syntax requires named parameters: id as a unique identifier and namespace as the shared namespace.

2. Step 2: Match parameters correctly

   view.matchedGeometryEffect(id: "uniqueID", namespace: ns) uses id: "uniqueID" and namespace: ns, which is correct.

3. Final Answer:

   view.matchedGeometryEffect(id: "uniqueID", namespace: ns) -> Option B

4. Quick Check:

   Correct syntax uses named parameters id and namespace [OK]

Hint: Use named parameters id and namespace in matchedGeometryEffect [OK]

Common Mistakes:

• Swapping id and namespace parameters
• Omitting parameter names
• Passing parameters in wrong order

3. Consider this SwiftUI code snippet:

struct ContentView: View {
  @Namespace var ns
  @State var isExpanded = false
  var body: some View {
    VStack {
      if isExpanded {
        RoundedRectangle(cornerRadius: 25)
          .matchedGeometryEffect(id: "shape", namespace: ns)
          .frame(width: 300, height: 200)
      } else {
        RoundedRectangle(cornerRadius: 25)
          .matchedGeometryEffect(id: "shape", namespace: ns)
          .frame(width: 100, height: 100)
      }
      Button("Toggle") { isExpanded.toggle() }
    }
  }
}

What happens when the button is tapped?

medium

A. The rectangle smoothly animates between small and large sizes

B. The rectangle instantly changes size without animation

C. The app crashes due to namespace error

D. The button does not toggle the rectangle size

Solution

1. Step 1: Understand matchedGeometryEffect behavior

   Using the same id and namespace links the two rectangles for animation.

2. Step 2: Analyze the toggle effect

   Toggling isExpanded switches between two frames, triggering a smooth size animation.

3. Final Answer:

   The rectangle smoothly animates between small and large sizes -> Option A

4. Quick Check:

   matchedGeometryEffect animates size changes smoothly [OK]

Hint: Same id and namespace animate size changes smoothly [OK]

Common Mistakes:

• Expecting instant size change without animation
• Confusing namespace usage
• Thinking toggle won't affect view

4. Given this code snippet, what is the error that prevents the matchedGeometryEffect animation from working?

@Namespace var ns

var body: some View {
  VStack {
    Circle()
      .matchedGeometryEffect(id: "circle", namespace: ns)
      .frame(width: 50, height: 50)
    if showSquare {
      Rectangle()
        .matchedGeometryEffect(id: "square", namespace: ns)
        .frame(width: 100, height: 100)
    }
  }
}

medium

A. Namespace is not declared properly

B. Frames are missing for the views

C. The ids for matchedGeometryEffect are different, so no animation occurs

D. showSquare is not toggled anywhere

Solution

1. Step 1: Check matchedGeometryEffect ids

   The Circle uses id "circle" and the Rectangle uses id "square"; they must share the same id to animate.

2. Step 2: Understand animation linking

   Different ids mean views are not linked, so no smooth animation happens.

3. Final Answer:

   The ids for matchedGeometryEffect are different, so no animation occurs -> Option C

4. Quick Check:

   Same id needed for matchedGeometryEffect animation [OK]

Hint: Use same id for views to animate with matchedGeometryEffect [OK]

Common Mistakes:

• Assuming different ids animate
• Ignoring namespace importance
• Missing frame sizes

5. You want to animate a card flipping effect between a front and back view using matchedGeometryEffect. Which approach correctly achieves this?

hard

A. Use the same id and namespace on front and back views, toggle visibility, and animate rotation

B. Use different id values for front and back views with the same namespace

C. Apply matchedGeometryEffect only to the front view and toggle the back view without it

D. Use matchedGeometryEffect with no namespace to link the views

Solution

1. Step 1: Understand matchedGeometryEffect for flipping

   To animate a flip, both front and back views must share the same id and namespace to link their geometry.

2. Step 2: Combine with rotation animation

   Toggling visibility and animating rotation creates the flip effect smoothly.

3. Final Answer:

   Use the same id and namespace on front and back views, toggle visibility, and animate rotation -> Option A

4. Quick Check:

   Same id + namespace + rotation = flip animation [OK]

Hint: Flip needs same id, namespace, and rotation animation [OK]

Common Mistakes:

• Using different ids breaks animation
• Forgetting to animate rotation
• Omitting namespace causes errors