Animated state changes in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this SwiftUI animation code?

Consider this SwiftUI view that toggles a circle's color with animation when tapped. What color will the circle show after tapping once?

iOS Swift

struct ContentView: View {
  @State private var isRed = false
  var body: some View {
    Circle()
      .fill(isRed ? Color.red : Color.blue)
      .frame(width: 100, height: 100)
      .onTapGesture {
        withAnimation {
          isRed.toggle()
        }
      }
  }
}

A The circle changes from blue to red smoothly with animation.

B The circle instantly changes from blue to red without animation.

C The circle changes from red to blue smoothly with animation.

D The circle does not change color on tap.

💡 Hint

Look at the initial color and the toggle inside withAnimation block.

The circle starts blue because isRed is false. Tapping toggles isRed to true inside withAnimation, so the fill color animates smoothly to red.

❓ lifecycle

intermediate

Which SwiftUI lifecycle event triggers the animation in this code?

Given this SwiftUI view, when does the animation run?

iOS Swift

struct ContentView: View {
  @State private var scale: CGFloat = 1.0
  var body: some View {
    Circle()
      .scaleEffect(scale)
      .onAppear {
        withAnimation(.easeInOut(duration: 1)) {
          scale = 2.0
        }
      }
  }
}

A When the circle is tapped.

B When the view appears on screen.

C When the scale variable is manually changed outside the view.

D When the view disappears from screen.

💡 Hint

Check the modifier that triggers the animation.

The animation is inside onAppear, so it runs once when the view first appears on screen.

🔧 Debug

advanced

Why does this SwiftUI animation not run as expected?

This code intends to animate the opacity change, but the circle instantly disappears without animation. Why?

iOS Swift

struct ContentView: View {
  @State private var isVisible = true
  var body: some View {
    Circle()
      .opacity(isVisible ? 1 : 0)
      .onTapGesture {
        isVisible.toggle()
      }
  }
}

A Because the Circle view does not support opacity modifier.

B Because opacity cannot be animated in SwiftUI.

C Because onTapGesture does not trigger state changes.

D Because the opacity change is not wrapped inside withAnimation block.

💡 Hint

Animations require explicit withAnimation or implicit animation modifiers.

Without withAnimation, state changes happen instantly without animation. Wrapping isVisible.toggle() inside withAnimation fixes this.

❓ navigation

advanced

What happens to the animation when navigating back in this SwiftUI NavigationStack?

This view animates a rectangle's width on appear. What happens when the user navigates back to this view?

iOS Swift

struct DetailView: View {
  @State private var width: CGFloat = 100
  var body: some View {
    Rectangle()
      .frame(width: width, height: 50)
      .onAppear {
        width = 100
        withAnimation(.linear(duration: 1)) {
          width = 200
        }
      }
  }
}

struct ContentView: View {
  var body: some View {
    NavigationStack {
      NavigationLink("Go to Detail", destination: DetailView())
    }
  }
}

A The rectangle animates from width 100 to 200 every time the DetailView appears.

B The rectangle animates only the first time DetailView appears, not on back navigation.

C The rectangle width stays at 200 without animation on back navigation.

D The rectangle does not animate at all.

💡 Hint

onAppear runs every time the view appears on screen.

Each time DetailView appears, onAppear triggers the animation from width 100 to 200.

🧠 Conceptual

expert

Which statement about SwiftUI animated state changes is true?

Choose the correct statement about how SwiftUI handles animated state changes.

A Animations in SwiftUI require manual frame-by-frame updates for smooth transitions.

B SwiftUI animations only work on color and opacity properties, not on layout changes.

C State changes inside withAnimation blocks animate all affected view properties automatically.

D State changes outside withAnimation blocks never update the UI.

💡 Hint

Think about how withAnimation affects state changes.

withAnimation tells SwiftUI to animate all view changes caused by the state change inside it, including layout and color.

Practice

1. What does the withAnimation function do in SwiftUI when changing a state variable?

easy

A. It delays the state change by a few seconds.

B. It disables all animations temporarily.

C. It resets the state variable to its initial value.

D. It animates the UI changes caused by the state update.

Solution

1. Step 1: Understand the role of withAnimation

   The withAnimation function wraps state changes to animate the resulting UI updates smoothly.

2. Step 2: Identify the effect on UI

   When a state variable changes inside withAnimation, SwiftUI animates the transition of views affected by that state.

3. Final Answer:

   It animates the UI changes caused by the state update. -> Option D

4. Quick Check:

   withAnimation = animate UI changes [OK]

Hint: Remember: withAnimation wraps state changes to animate UI [OK]

Common Mistakes:

• Thinking withAnimation delays state changes
• Confusing withAnimation with disabling animations
• Assuming it resets state variables

2. Which of the following is the correct syntax to animate a state change in SwiftUI?

easy

A. animate { isOn.toggle() }

B. withAnimation(isOn.toggle())

C. withAnimation { isOn.toggle() }

D. animation { isOn.toggle() }

Solution

1. Step 1: Recall the correct function syntax

   The correct syntax uses withAnimation as a function wrapping a closure that changes the state.

2. Step 2: Check each option

   withAnimation { isOn.toggle() } correctly uses withAnimation { isOn.toggle() }. Others either misuse the function name or syntax.

3. Final Answer:

   withAnimation { isOn.toggle() } -> Option C

4. Quick Check:

   Correct syntax = withAnimation { ... } [OK]

Hint: Use withAnimation { stateChange } syntax for animation [OK]

Common Mistakes:

• Calling withAnimation with parentheses around state change
• Using non-existent functions like animate or animation incorrectly
• Not wrapping state changes inside a closure

3. Given the code snippet:

struct ContentView: View {
  @State private var isVisible = false
  var body: some View {
    VStack {
      Button("Toggle") {
        withAnimation {
          isVisible.toggle()
        }
      }
      if isVisible {
        Text("Hello World")
          .transition(.slide)
      }
    }
  }
}

What happens when the button is tapped?

medium

A. The text "Hello World" appears or disappears with a sliding animation.

B. The text "Hello World" appears instantly without animation.

C. The app crashes due to missing animation modifier.

D. The button toggles but the text never appears.

Solution

1. Step 1: Analyze the state toggle inside withAnimation

   The isVisible state toggles inside withAnimation, so UI changes animate.

2. Step 2: Understand the transition modifier

   The .transition(.slide) modifier animates the text sliding in or out when it appears or disappears.

3. Final Answer:

   The text "Hello World" appears or disappears with a sliding animation. -> Option A

4. Quick Check:

   withAnimation + .transition = animated slide [OK]

Hint: withAnimation + .transition triggers smooth view animations [OK]

Common Mistakes:

• Ignoring the transition modifier effect
• Thinking animation requires .animation() modifier here
• Assuming instant appearance without animation

4. Identify the error in this SwiftUI code snippet that tries to animate a color change:

@State private var isRed = true
var body: some View {
  Rectangle()
    .fill(isRed ? Color.red : Color.blue)
    .onTapGesture {
      isRed.toggle()
    }
    .animation(.easeInOut)
}

medium

A. The .animation modifier is deprecated and should be replaced with withAnimation.

B. The state variable isRed should not be toggled inside onTapGesture.

C. The Rectangle view cannot change fill color dynamically.

D. The .fill modifier must be outside the Rectangle view.

Solution

1. Step 1: Understand .animation modifier usage

   The .animation modifier on a view is deprecated and may not animate state changes reliably.

2. Step 2: Use withAnimation for state changes

   Wrapping the state toggle inside withAnimation ensures the color change animates properly.

3. Final Answer:

   The .animation modifier is deprecated and should be replaced with withAnimation. -> Option A

4. Quick Check:

   Use withAnimation, not .animation modifier [OK]

Hint: Use withAnimation to animate state changes, not .animation modifier [OK]

Common Mistakes:

• Using .animation modifier on views instead of withAnimation
• Thinking onTapGesture cannot toggle state
• Misplacing .fill modifier

5. You want to animate a button's scale when pressed and return to normal size when released. Which approach correctly combines state and animation in SwiftUI?

hard

A. Use a Timer to change scale repeatedly for animation effect.

B. Use a @GestureState to track pressing and apply .scaleEffect with .animation inside the gesture.

C. Toggle a @State variable on tap and use .animation on the button without gestures.

D. Apply .animation modifier directly on the button without state changes.

Solution

1. Step 1: Understand gesture-driven animations

   Using @GestureState tracks the pressing state smoothly during the gesture lifecycle.

2. Step 2: Apply scaleEffect with animation inside gesture

   Applying .scaleEffect based on gesture state and animating it creates a responsive press effect.

3. Step 3: Evaluate other options

   Options A, B, and D either lack gesture responsiveness or misuse animation techniques.

4. Final Answer:

   Use a @GestureState to track pressing and apply .scaleEffect with .animation inside the gesture. -> Option B

5. Quick Check:

   GestureState + scaleEffect + animation = correct press animation [OK]

Hint: Use @GestureState for press animations, not just @State [OK]

Common Mistakes:

• Using @State instead of @GestureState for press tracking
• Applying .animation modifier without state changes
• Using Timer for simple press animations