Implicit animations (.animation modifier) in iOS Swift - Mini App: Build & Ship

Build: Color and Size Animator

This screen shows a circle that changes its color and size smoothly when you tap a button. The changes animate automatically using implicit animations.

Target UI

-------------------------
|                       |
|        ●              |
|                       |
|   [Animate Circle]     |
|                       |
-------------------------

Display a circle shape in the center of the screen.

Add a button labeled 'Animate Circle' below the circle.

When the button is tapped, the circle changes its color randomly and toggles its size between small and large.

Use implicit animations with the .animation modifier to animate the color and size changes smoothly.

Ensure the animation uses ease-in-out timing and lasts 0.5 seconds.

Starter Code

iOS Swift

import SwiftUI

struct ContentView: View {
    @State private var isLarge = false
    @State private var circleColor = Color.blue

    var body: some View {
        VStack(spacing: 40) {
            Circle()
                .fill(circleColor)
                .frame(width: isLarge ? 200 : 100, height: isLarge ? 200 : 100)
                // TODO: Add animation modifier here

            Button("Animate Circle") {
                // TODO: Change color and toggle size here
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Task 1

Task 2

Solution

iOS Swift

import SwiftUI

struct ContentView: View {
    @State private var isLarge = false
    @State private var circleColor = Color.blue

    var body: some View {
        VStack(spacing: 40) {
            Circle()
                .fill(circleColor)
                .frame(width: isLarge ? 200 : 100, height: isLarge ? 200 : 100)
                .animation(.easeInOut(duration: 0.5), value: isLarge)
                .animation(.easeInOut(duration: 0.5), value: circleColor)

            Button("Animate Circle") {
                isLarge.toggle()
                circleColor = Color(
                    red: Double.random(in: 0...1),
                    green: Double.random(in: 0...1),
                    blue: Double.random(in: 0...1)
                )
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

We use two @State variables: isLarge to control the circle size and circleColor for its color. The Circle view changes its frame size and fill color based on these states.

The .animation modifier is applied twice with the same animation but different value parameters to animate changes to both size and color smoothly. The animation uses easeInOut timing over 0.5 seconds.

When the button is tapped, isLarge toggles between true and false, switching the circle size. The color changes to a new random color by generating random red, green, and blue values between 0 and 1.

This setup creates a smooth implicit animation for both size and color changes without manually controlling animation states.

Final Result

Completed Screen

-------------------------
|                       |
|        ●              |
|                       |
|   [Animate Circle]     |
|                       |
-------------------------

User taps 'Animate Circle' button.

Circle smoothly grows or shrinks in size.

Circle color smoothly changes to a new random color.

Stretch Goal

Add a toggle switch to enable or disable the animations dynamically.

💡 Hint

Use a @State Boolean to track if animations are enabled, and conditionally apply the .animation modifier only when enabled.

Practice

1. What does the .animation modifier do in SwiftUI when applied with a value parameter?

easy

A. It immediately resets the view to its original state without animation.

B. It smoothly animates changes to the view when the specified value changes.

C. It disables all animations for the view.

D. It delays the view update until the animation finishes.

Solution

1. Step 1: Understand the purpose of .animation modifier

   The .animation modifier in SwiftUI is used to add animation effects to changes in view properties.

2. Step 2: Role of the value parameter

   When a value parameter is provided, SwiftUI animates changes only when that value changes, making transitions smooth.

3. Final Answer:

   It smoothly animates changes to the view when the specified value changes. -> Option B

4. Quick Check:

   .animation with value = smooth animation on value change [OK]

Hint: Animation triggers on value changes for smooth UI updates [OK]

Common Mistakes:

• Thinking .animation disables animations
• Assuming it resets views instantly
• Believing it delays updates instead of animating

2. Which of the following is the correct syntax to add an implicit animation to a SwiftUI view that animates changes to a Boolean state variable named isOn?

easy

A. .animation(isOn, .easeInOut)

B. .animation(.easeInOut)

C. .animation(easeInOut, value: isOn)

D. .animation(.easeInOut, value: isOn)

Solution

1. Step 1: Recall the correct .animation syntax

   The correct syntax uses .animation(animation, value: variable) where animation is a predefined animation like .easeInOut.

2. Step 2: Match the syntax with the options

   .animation(.easeInOut, value: isOn) correctly places .easeInOut first and then value: isOn. Other options have wrong order or missing dot.

3. Final Answer:

   .animation(.easeInOut, value: isOn) -> Option D

4. Quick Check:

   Correct syntax = .animation(animation, value: state) [OK]

Hint: Use .animation(animation, value: stateVariable) format [OK]

Common Mistakes:

• Swapping parameters order
• Missing dot before animation type
• Omitting value label

3. Consider this SwiftUI code snippet:

struct ContentView: View {
  @State private var isVisible = false
  var body: some View {
    VStack {
      if isVisible {
        Text("Hello!")
          .opacity(1)
          .animation(.easeIn, value: isVisible)
      } else {
        Text("Hello!")
          .opacity(0)
          .animation(.easeIn, value: isVisible)
      }
      Button("Toggle") {
        isVisible.toggle()
      }
    }
  }
}

What happens when the button is tapped?

medium

A. The text fades in but disappears instantly without animation.

B. The text appears and disappears instantly without animation.

C. The text fades in and out smoothly when toggling visibility.

D. The app crashes due to duplicate views.

Solution

1. Step 1: Analyze the opacity and animation usage

   The Text view changes opacity between 0 and 1 depending on isVisible, with .animation(.easeIn, value: isVisible) applied.

2. Step 2: Understand the effect of .animation with value

   When isVisible toggles, opacity changes trigger a smooth fade animation because of the .animation modifier.

3. Final Answer:

   The text fades in and out smoothly when toggling visibility. -> Option C

4. Quick Check:

   Opacity changes + .animation(value) = smooth fade [OK]

Hint: Opacity with .animation(value) creates smooth fade effects [OK]

Common Mistakes:

• Thinking opacity changes instantly without animation
• Assuming animation only works on appearance
• Confusing animation with explicit withAnimation block

4. This SwiftUI code intends to animate a color change when the button is tapped:

struct ContentView: View {
  @State private var isRed = false
  var body: some View {
    Circle()
      .fill(isRed ? Color.red : Color.blue)
      .animation(.linear, value: isRed)
    Button("Change Color") {
      isRed.toggle()
    }
  }
}

However, the color does not animate smoothly. What is the problem?

medium

A. The Button is not inside a container view, causing layout issues.

B. The .animation modifier is applied to the Circle but missing a container for Button.

C. Color changes cannot be animated implicitly in SwiftUI.

D. The .animation modifier should be applied to the container view, not just the Circle.

Solution

1. Step 1: Analyze the body structure

   The Circle expression is followed by Button without a container like VStack. The Circle View is created but its result discarded (unused), displaying only the Button.

2. Step 2: Understand the layout problem

   Without wrapping both in a container view, layout issues cause the Circle not to render, so no color is visible to animate.

3. Final Answer:

   The Button is not inside a container view, causing layout issues. -> Option A

4. Quick Check:

   Missing container around multiple views = discarded Circle, no animation [OK]

Hint: Wrap multiple views in VStack/HStack for proper layout [OK]

Common Mistakes:

• Placing Button outside container causing no animation
• Believing Color cannot animate implicitly
• Applying .animation only to one view without container

5. You want to animate a view's size and color changes together smoothly when a toggle is switched. Which of the following SwiftUI code snippets correctly applies implicit animations to both properties using the .animation modifier?

hard

A. VStack {
Rectangle()
.frame(width: isOn ? 200 : 100, height: 100)
.foregroundColor(isOn ? .green : .gray)
.animation(.easeInOut, value: isOn)
Toggle("Toggle", isOn: $isOn)
}

B. VStack {
Rectangle()
.frame(width: isOn ? 200 : 100, height: 100)
.foregroundColor(isOn ? .green : .gray)
Toggle("Toggle", isOn: $isOn)
.animation(.easeInOut, value: isOn)
}

C. VStack {
Rectangle()
.frame(width: isOn ? 200 : 100, height: 100)
.foregroundColor(isOn ? .green : .gray)
Toggle("Toggle", isOn: $isOn)
}
.animation(.easeInOut, value: isOn)

D. VStack {
Rectangle()
.frame(width: isOn ? 200 : 100, height: 100)
.foregroundColor(isOn ? .green : .gray)
}
.animation(.easeInOut, value: isOn)
Toggle("Toggle", isOn: $isOn)

Solution

1. Step 1: Identify where to apply .animation for multiple property changes

   Applying .animation directly on the Rectangle view with value: isOn animates all its property changes smoothly.

2. Step 2: Check the placement of Toggle and animation modifier

   VStack { Rectangle() .frame(width: isOn ? 200 : 100, height: 100) .foregroundColor(isOn ? .green : .gray) .animation(.easeInOut, value: isOn) Toggle("Toggle", isOn: $isOn) } applies .animation on Rectangle and keeps Toggle outside, which is correct. VStack { Rectangle() .frame(width: isOn ? 200 : 100, height: 100) .foregroundColor(isOn ? .green : .gray) Toggle("Toggle", isOn: $isOn) } .animation(.easeInOut, value: isOn) applies animation on VStack, which animates all children but may cause unwanted effects on Toggle.

3. Final Answer:

   Snippet with .animation(.easeInOut, value: isOn) on Rectangle -> Option A

4. Quick Check:

   Apply .animation on view changing properties for smooth combined animation [OK]

Hint: Apply .animation on the view with changing properties [OK]

Common Mistakes:

• Applying .animation on Toggle instead of changing view
• Applying .animation on container causing unwanted animations
• Placing .animation outside view hierarchy incorrectly