Transition effects in iOS Swift - Mini App: Build & Ship

Build: Color Transition Screen

This screen shows a button that, when tapped, smoothly changes the background color with a fade transition effect.

Target UI

-------------------------
|                       |
|                       |
|     [Change Color]     |
|                       |
|                       |
-------------------------

Add a UIButton centered on the screen with the title 'Change Color'.

When the button is tapped, the background color of the view changes to a random color.

The color change should use a smooth fade transition effect lasting about 0.5 seconds.

Starter Code

iOS Swift

import UIKit

class ColorTransitionViewController: UIViewController {

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

        let button = UIButton(type: .system)
        button.setTitle("Change Color", for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(button)

        NSLayoutConstraint.activate([
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])

        // TODO: Add target action for button tap
    }

    // TODO: Add function to handle color change with transition
}

Task 1

Task 2

Solution

iOS Swift

import UIKit

class ColorTransitionViewController: UIViewController {

    private let button = UIButton(type: .system)

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

        button.setTitle("Change Color", for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(button)

        NSLayoutConstraint.activate([
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])

        button.addTarget(self, action: #selector(changeColor), for: .touchUpInside)
    }

    @objc private func changeColor() {
        let newColor = UIColor(
            red: CGFloat.random(in: 0...1),
            green: CGFloat.random(in: 0...1),
            blue: CGFloat.random(in: 0...1),
            alpha: 1.0
        )

        UIView.transition(with: view, duration: 0.5, options: [.transitionCrossDissolve], animations: {
            self.view.backgroundColor = newColor
        }, completion: nil)
    }
}

We create a UIButton centered on the screen with the title "Change Color". We add a target action to the button that calls the changeColor method when tapped. In changeColor, we generate a random color and then use UIView.transition with the transitionCrossDissolve option to smoothly fade the background color change over 0.5 seconds. This creates a nice visual transition effect for the color change.

Final Result

Completed Screen

-------------------------
|                       |
|                       |
|     [Change Color]     |
|                       |
|                       |
-------------------------

When the user taps the 'Change Color' button, the background color smoothly fades to a new random color over half a second.

Stretch Goal

Add a button to toggle between fade and slide transition effects for the background color change.

💡 Hint

Use UIView.transition options like .transitionFlipFromLeft or .transitionCurlUp for different animations.