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.