Animated state changes in iOS Swift - Mini App: Build & Ship

Build: Color Toggle Animation

A screen with a square that changes color and size with animation when tapped.

Target UI

┌───────────────────────────┐
│                           │
│         ■■■■■■■■          │
│         ■      ■          │
│         ■      ■          │
│         ■■■■■■■■          │
│                           │
│   [Tap the square to      ]│
│    change color & size]   │
└───────────────────────────┘

Display a square in the center of the screen.

When the user taps the square, it should animate smoothly to a new color and size.

Toggle between two colors and two sizes on each tap.

Use UIView animation with duration of 0.5 seconds.

Ensure the square remains centered during size changes.

Starter Code

iOS Swift

import UIKit

class ColorToggleViewController: UIViewController {
    private let squareView = UIView()
    private var isToggled = false

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        squareView.backgroundColor = .systemBlue
        squareView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(squareView)

        NSLayoutConstraint.activate([
            squareView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            squareView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            squareView.widthAnchor.constraint(equalToConstant: 100),
            squareView.heightAnchor.constraint(equalToConstant: 100)
        ])

        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(squareTapped))
        squareView.addGestureRecognizer(tapGesture)
        squareView.isUserInteractionEnabled = true
    }

    @objc private func squareTapped() {
        // TODO: Add animation code here
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import UIKit

class ColorToggleViewController: UIViewController {
    private let squareView = UIView()
    private var isToggled = false
    private var widthConstraint: NSLayoutConstraint!
    private var heightConstraint: NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        squareView.backgroundColor = .systemBlue
        squareView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(squareView)

        widthConstraint = squareView.widthAnchor.constraint(equalToConstant: 100)
        heightConstraint = squareView.heightAnchor.constraint(equalToConstant: 100)

        NSLayoutConstraint.activate([
            squareView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            squareView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            widthConstraint,
            heightConstraint
        ])

        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(squareTapped))
        squareView.addGestureRecognizer(tapGesture)
        squareView.isUserInteractionEnabled = true
    }

    @objc private func squareTapped() {
        isToggled.toggle()

        widthConstraint.constant = isToggled ? 150 : 100
        heightConstraint.constant = isToggled ? 150 : 100

        UIView.animate(withDuration: 0.5) {
            self.squareView.backgroundColor = self.isToggled ? .systemGreen : .systemBlue
            self.view.layoutIfNeeded()
        }
    }
}

We keep references to the width and height constraints so we can change their constants when toggling.

When the square is tapped, we toggle the isToggled boolean.

We update the constraint constants to 150 or 100 depending on the toggle state.

Inside UIView.animate, we change the background color and call layoutIfNeeded() to animate the size change smoothly.

This keeps the square centered and animates both color and size changes over 0.5 seconds.

Final Result

Completed Screen

┌───────────────────────────┐
│                           │
│         ■■■■■■■■■■■■■      │
│         ■           ■      │
│         ■           ■      │
│         ■           ■      │
│         ■■■■■■■■■■■■■      │
│                           │
│   [Tap the square to      ]│
│    change color & size]   │
└───────────────────────────┘

User taps the blue square in the center.

The square smoothly grows larger and changes color to green over 0.5 seconds.

Tapping again shrinks the square back to original size and changes color back to blue.

Stretch Goal

Add a label below the square that updates to show "Large Green" or "Small Blue" depending on the square's state.

💡 Hint

Create a UILabel below the square and update its text inside the animation block in squareTapped().