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.