Implicit animations (.animation modifier) in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an implicit animation to the color change.

iOS Swift

Rectangle()
  .fill(Color.red)
  .frame(width: 100, height: 100)
  .animation([1])

Drag options to blanks, or click blank then click option'

Aanimate()

BwithAnimation

C.easeInOut

DAnimation.easeInOut(duration: 1)

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function like withAnimation instead of an Animation value.

Passing a modifier like .easeInOut without Animation prefix.

The .animation() modifier expects an Animation value like Animation.easeInOut(duration: 1) to animate changes implicitly.

2fill in blank

medium

Complete the code to animate the opacity change with a spring effect.

iOS Swift

Circle()
  .opacity(isVisible ? 1 : 0)
  .animation([1])

Drag options to blanks, or click blank then click option'

AAnimation.spring()

BAnimation.linear(duration: 0.5)

CAnimation.easeOut(duration: 1)

DAnimation.default

Attempts:

3 left

💡 Hint

Common Mistakes

Using linear animation which is not springy.

Using Animation.default which does not create a spring effect.

The Animation.spring() creates a spring-like implicit animation for smooth opacity changes.

3fill in blank

hard

Fix the error in the animation modifier to animate the scale change.

iOS Swift

Image(systemName: "star.fill")
  .scaleEffect(isScaled ? 1.5 : 1)
  .animation([1])

Drag options to blanks, or click blank then click option'

AAnimation.easeIn(duration: 0.3)

BAnimation.easeInOut(duration: 0.3)

CAnimation.spring(response: 0.5, dampingFraction: 0.6, blendDuration: 0)

DAnimation.linear

Attempts:

3 left

💡 Hint

Common Mistakes

Using Animation.linear without parentheses.

Using easeInOut without parameters.

The spring animation with parameters response, dampingFraction, and blendDuration creates a smooth scale animation.

4fill in blank

hard

Fill both blanks to animate the rotation with a delay and repeat forever.

iOS Swift

Rectangle()
  .rotationEffect(.degrees(angle))
  .animation([1].delay(1).repeatForever(autoreverses: [2]))

Drag options to blanks, or click blank then click option'

AAnimation.linear(duration: 2)

Btrue

Cfalse

DAnimation.easeIn(duration: 2)

Attempts:

3 left

💡 Hint

Common Mistakes

Using easeIn instead of linear for smooth rotation.

Setting autoreverses to false which stops reversing.

Use Animation.linear(duration: 2) for smooth rotation, delay it by 1 second, and repeat forever with autoreverses set to true.

5fill in blank

hard

Fill all three blanks to animate a color change with easeInOut, delay, and no autoreverse.

iOS Swift

Circle()
  .fill(currentColor)
  .animation([1].delay([2]).repeatCount([3], autoreverses: false))

Drag options to blanks, or click blank then click option'

AAnimation.easeInOut(duration: 1.5)

B0.5

C3

DAnimation.spring()

Attempts:

3 left

💡 Hint

Common Mistakes

Using spring animation instead of easeInOut.

Forgetting to set autoreverses to false.

The animation uses easeInOut with 1.5 seconds duration, delays by 0.5 seconds, and repeats 3 times without autoreversing.

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