Why animations polish user experience in iOS Swift - Build It to Prove It

Build: Animated Welcome Screen

This screen welcomes users with a smooth fade-in animation on the welcome text and a button that scales up when tapped, showing how animations make the app feel friendly and polished.

Target UI

-------------------------
|                       |
|      Welcome!          |
|                       |
|    [ Get Started ]     |
|                       |
-------------------------

Display a welcome text that fades in when the screen appears

Add a 'Get Started' button below the text

When the button is tapped, it should scale up briefly to show feedback

Use simple UIKit animations with UIView.animate

Keep the layout centered and accessible

Starter Code

iOS Swift

import UIKit

class WelcomeViewController: UIViewController {

    let welcomeLabel = UILabel()
    let getStartedButton = UIButton(type: .system)

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

        // Setup welcomeLabel
        welcomeLabel.text = "Welcome!"
        welcomeLabel.font = UIFont.systemFont(ofSize: 32, weight: .bold)
        welcomeLabel.alpha = 0 // Start hidden for fade-in
        welcomeLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(welcomeLabel)

        // Setup getStartedButton
        getStartedButton.setTitle("Get Started", for: .normal)
        getStartedButton.titleLabel?.font = UIFont.systemFont(ofSize: 20, weight: .medium)
        getStartedButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(getStartedButton)

        // TODO: Add constraints here

        // TODO: Add button tap target here
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        // TODO: Animate welcomeLabel fade-in here
    }

    // TODO: Add button tap animation method here
}

Solution

iOS Swift

import UIKit

class WelcomeViewController: UIViewController {

    let welcomeLabel = UILabel()
    let getStartedButton = UIButton(type: .system)

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

        // Setup welcomeLabel
        welcomeLabel.text = "Welcome!"
        welcomeLabel.font = UIFont.systemFont(ofSize: 32, weight: .bold)
        welcomeLabel.alpha = 0 // Start hidden for fade-in
        welcomeLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(welcomeLabel)

        // Setup getStartedButton
        getStartedButton.setTitle("Get Started", for: .normal)
        getStartedButton.titleLabel?.font = UIFont.systemFont(ofSize: 20, weight: .medium)
        getStartedButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(getStartedButton)

        // Constraints
        NSLayoutConstraint.activate([
            welcomeLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            welcomeLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -40),
            getStartedButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            getStartedButton.topAnchor.constraint(equalTo: welcomeLabel.bottomAnchor, constant: 20)
        ])

        // Button tap target
        getStartedButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        // Animate welcomeLabel fade-in
        UIView.animate(withDuration: 1.0, animations: {
            self.welcomeLabel.alpha = 1
        }) { _ in
            // Bonus feature: background color fade to soft blue
            UIView.animate(withDuration: 1.0) {
                self.view.backgroundColor = UIColor(red: 0.9, green: 0.95, blue: 1.0, alpha: 1.0)
            }
        }
    }

    @objc func buttonTapped() {
        // Animate button scale up and back
        UIView.animate(withDuration: 0.15, animations: {
            self.getStartedButton.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
        }) { _ in
            UIView.animate(withDuration: 0.15) {
                self.getStartedButton.transform = CGAffineTransform.identity
            }
        }
    }
}

We start with the welcome label hidden by setting its alpha to 0. When the screen appears, we animate its alpha to 1 over one second, making it fade in smoothly. This gentle introduction feels welcoming.

The button is centered below the label. When tapped, it quickly grows bigger and then returns to normal size. This scaling animation gives immediate feedback, making the app feel responsive and polished.

Using UIView.animate keeps the code simple and uses built-in UIKit animations that run smoothly on all iOS devices.

Final Result

Completed Screen

-------------------------
|                       |
|      Welcome!          |
|                       |
|    [ Get Started ]     |
|                       |
-------------------------

When the screen appears, the 'Welcome!' text fades in from invisible to fully visible.

When the user taps the 'Get Started' button, the button quickly grows bigger and then returns to normal size, showing a tap animation.

Stretch Goal

Add a subtle background color fade animation that changes the screen background from white to a soft blue after the welcome text fades in.

💡 Hint

Use UIView.animate with a delay after the welcomeLabel fade-in to change view.backgroundColor smoothly.

Practice

1. Why do animations improve the user experience in iOS apps?

easy

A. They replace the need for buttons and controls.

B. They increase the app's file size significantly.

C. They slow down the app's performance.

D. They make the app feel smoother and easier to understand.

Solution

1. Step 1: Understand the purpose of animations

   Animations help users see changes and transitions clearly, making the app feel smooth.

2. Step 2: Evaluate the options

   Only They make the app feel smoother and easier to understand. correctly states that animations improve smoothness and understanding. Other options describe negative or incorrect effects.

3. Final Answer:

   They make the app feel smoother and easier to understand. -> Option D

4. Quick Check:

   Animations improve smoothness = D [OK]

Hint: Animations help users see changes clearly [OK]

Common Mistakes:

• Thinking animations always slow down apps
• Believing animations replace UI controls
• Assuming animations increase app size greatly

2. Which of the following is the correct syntax to animate a view's alpha to 0.5 over 0.3 seconds in Swift?

easy

A. UIView.animate(withDuration: 0.3, animation: { view.alpha = 0.5 })

B. UIView.animate(duration: 0.3) { view.alpha = 0.5 }

C. UIView.animate(withDuration: 0.3, animations: { view.alpha = 0.5 })

D. UIView.animate(0.3) { view.alpha = 0.5 }

Solution

1. Step 1: Recall UIView.animate syntax

   The correct method signature is UIView.animate(withDuration:animations:).

2. Step 2: Match the options to the correct syntax

   Only UIView.animate(withDuration: 0.3, animations: { view.alpha = 0.5 }) uses the correct parameter names and closure syntax.

3. Final Answer:

   UIView.animate(withDuration: 0.3, animations: { view.alpha = 0.5 }) -> Option C

4. Quick Check:

   Correct UIView.animate syntax = C [OK]

Hint: Remember UIView.animate uses withDuration and animations closure [OK]

Common Mistakes:

• Omitting 'withDuration' label
• Using wrong method parameters
• Not wrapping changes inside animations closure

3. What will be the visible effect of this Swift code?

UIView.animate(withDuration: 1.0) {
  myView.frame.origin.x += 100
}

medium

A. The view will smoothly slide 100 points to the right over 1 second.

B. The view will instantly jump 100 points to the right.

C. The view will fade out over 1 second.

D. The view will shrink in size over 1 second.

Solution

1. Step 1: Understand UIView.animate effect on frame

   Animating frame.origin.x moves the view horizontally smoothly over the duration.

2. Step 2: Match the animation behavior

   The code moves the view 100 points right smoothly in 1 second, so The view will smoothly slide 100 points to the right over 1 second. is correct.

3. Final Answer:

   The view will smoothly slide 100 points to the right over 1 second. -> Option A

4. Quick Check:

   Animating frame changes = smooth movement [OK]

Hint: Animating frame.origin.x moves view smoothly horizontally [OK]

Common Mistakes:

• Thinking the move is instant, not animated
• Confusing frame change with fade or size change
• Ignoring the animation duration

4. Identify the error in this Swift animation code:

UIView.animate(withDuration: 0.5) {
  myView.alpha = 0
}

medium

A. No error; code will animate alpha to 0 correctly.

B. Missing completion handler closure.

C. Incorrect method name; should be animateWithDuration.

D. Animation duration must be at least 1 second.

Solution

1. Step 1: Check UIView.animate syntax

   The method UIView.animate(withDuration:) with a trailing closure is valid and animates changes inside the closure.

2. Step 2: Verify animation correctness

   Setting alpha to 0 inside the closure animates the fade out correctly; no completion handler is required.

3. Final Answer:

   No error; code will animate alpha to 0 correctly. -> Option A

4. Quick Check:

   UIView.animate with closure is valid = B [OK]

Hint: Trailing closure syntax is valid for UIView.animate [OK]

Common Mistakes:

• Thinking completion handler is mandatory
• Confusing method name with older Objective-C style
• Believing duration must be longer than 0.5 seconds

5. You want to animate a button's background color change smoothly when tapped. Which approach best improves user experience?

hard

A. Change the background color instantly without animation.

B. Use UIView.animate with a short duration to change the background color.

C. Disable user interaction during the color change.

D. Replace the button with a static image.

Solution

1. Step 1: Understand animation benefits for feedback

   Animating color changes gives smooth visual feedback, making the app feel responsive and polished.

2. Step 2: Evaluate options for best user experience

   Use UIView.animate with a short duration to change the background color. uses UIView.animate to smoothly change color, improving experience. Other options reduce feedback or usability.

3. Final Answer:

   Use UIView.animate with a short duration to change the background color. -> Option B

4. Quick Check:

   Smooth color animation improves feedback = A [OK]

Hint: Animate color changes for smooth user feedback [OK]

Common Mistakes:

• Changing colors instantly without animation
• Disabling interaction unnecessarily
• Using static images instead of interactive buttons