Implicit animations (.animation modifier) in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you tap the button?

Consider this SwiftUI code snippet. What will you see when you tap the "Change Color" button?

iOS Swift

struct ContentView: View {
  @State private var isRed = false
  var body: some View {
    VStack {
      Rectangle()
        .fill(isRed ? Color.red : Color.blue)
        .frame(width: 100, height: 100)
        .animation(.easeInOut, value: isRed)
      Button("Change Color") {
        isRed.toggle()
      }
    }
  }
}

A The rectangle instantly changes color without animation when tapped.

B The rectangle smoothly changes color between red and blue when tapped.

C The rectangle fades out completely when tapped.

D The button does nothing when tapped.

💡 Hint

Look at the .animation modifier and the value parameter.

The .animation(.easeInOut, value: isRed) modifier tells SwiftUI to animate changes to views that depend on isRed. When the button toggles isRed, the rectangle color changes smoothly.

❓ lifecycle

intermediate

Why does the animation not run?

Why does this SwiftUI view NOT animate the color change when the button is tapped?

iOS Swift

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

A Because the .animation modifier is missing on the Rectangle view.

B Because the withAnimation block is incorrectly placed inside the Button action.

C Because the Rectangle view does not have a frame modifier.

D Because the isRed state variable is not marked with @State.

💡 Hint

Think about where the animation modifier should be to animate view changes.

Using withAnimation inside the button action triggers animation for state changes, but without the .animation modifier on the view, SwiftUI may not animate the color change. The .animation modifier explicitly tells SwiftUI to animate changes to that view.

📝 Syntax

advanced

Which code compiles and animates the scale change?

Choose the correct SwiftUI code snippet that animates a circle scaling up and down when tapped.

A

Circle()
  .scaleEffect(isScaled ? 2 : 1)
  .animation(.spring(), value: isScaled)
  .onTapGesture { isScaled.toggle() }

B

Circle()
  .scaleEffect(isScaled ? 2 : 1)
  .animation(.spring())
  .onTapGesture { isScaled.toggle() }

C

Circle()
  .scaleEffect(isScaled ? 2 : 1)
  .animation(.spring(), value: isScaled)
  .onTapGesture { withAnimation { isScaled.toggle() } }

D

Circle()
  .scaleEffect(isScaled ? 2 : 1)
  .onTapGesture { isScaled.toggle() }

💡 Hint

Check the use of the .animation modifier with the value parameter.

Option A correctly uses .animation(.spring(), value: isScaled) to animate changes to the scale effect when isScaled changes. Option A misses the value parameter, so animation won't trigger properly. Option A redundantly uses withAnimation inside the gesture, which is unnecessary and can cause conflicts. Option A has no animation modifier, so no animation occurs.

🔧 Debug

advanced

Why does the animation jump instead of animate smoothly?

Given this code, why does the rectangle jump to the new position instead of animating smoothly?

iOS Swift

struct ContentView: View {
  @State private var offset = CGSize.zero
  var body: some View {
    Rectangle()
      .frame(width: 100, height: 100)
      .offset(offset)
      .animation(.easeInOut, value: offset)
      .gesture(
        DragGesture()
          .onChanged { gesture in
            offset = gesture.translation
          }
          .onEnded { _ in
            offset = .zero
          }
      )
  }
}

A Because the DragGesture is missing a call to withAnimation inside onEnded.

B Because the .animation modifier is applied after the .offset modifier.

C Because the offset state changes too frequently during dragging, animation cannot keep up.

D Because the offset variable is not marked with @State.

💡 Hint

Think about how often the offset state changes during dragging.

The offset state updates continuously during the drag gesture's onChanged event. This rapid state change causes the animation to restart repeatedly, resulting in a jumpy effect instead of smooth animation. To fix this, animations are better applied to discrete state changes, not continuous updates.

🧠 Conceptual

expert

What is the role of the 'value' parameter in .animation modifier?

In SwiftUI, what does the value parameter in the .animation(_:value:) modifier control?

A It disables animation when the value is nil.

B It sets the duration of the animation in seconds.

C It specifies the delay before the animation starts.

D It tells SwiftUI to animate changes only when the specified value changes.

💡 Hint

Think about when SwiftUI triggers the animation.

The value parameter acts as a trigger. SwiftUI watches this value, and only runs the animation when this value changes. This helps avoid animating unrelated state changes.