Spring animations in iOS Swift - Mini App: Build & Ship

Build: Spring Animation Demo

This screen shows a square that moves and bounces back with a spring animation when you tap a button.

Target UI

-----------------------
| Spring Animation Demo |
|---------------------|
|                     |
|       [■]           |
|                     |
|   [Animate Button]   |
-----------------------

Add a square UIView centered near the top.

Add a button labeled 'Animate Button' below the square.

When the button is tapped, the square moves down 200 points with a spring animation and then returns to original position.

Use UIViewPropertyAnimator with spring timing parameters for the animation.

Starter Code

iOS Swift

import UIKit

class SpringAnimationViewController: UIViewController {
    let squareView = UIView()
    let animateButton = UIButton(type: .system)

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

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

        // Setup animateButton
        animateButton.setTitle("Animate Button", for: .normal)
        animateButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animateButton)

        // TODO: Add constraints for squareView and animateButton

        // TODO: Add target action for animateButton
    }

    // TODO: Add animation function
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import UIKit

class SpringAnimationViewController: UIViewController {
    let squareView = UIView()
    let animateButton = UIButton(type: .system)

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

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

        // Setup animateButton
        animateButton.setTitle("Animate Button", for: .normal)
        animateButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animateButton)

        // Constraints
        NSLayoutConstraint.activate([
            squareView.widthAnchor.constraint(equalToConstant: 100),
            squareView.heightAnchor.constraint(equalToConstant: 100),
            squareView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            squareView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),

            animateButton.topAnchor.constraint(equalTo: squareView.bottomAnchor, constant: 40),
            animateButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ])

        // Add button action
        animateButton.addTarget(self, action: #selector(animateSquare), for: .touchUpInside)
    }

    @objc func animateSquare() {
        let originalPosition = squareView.center
        let animator = UIViewPropertyAnimator(duration: 1.0, dampingRatio: 0.5) {
            self.squareView.center = CGPoint(x: originalPosition.x, y: originalPosition.y + 200)
        }

        animator.addCompletion { _ in
            UIViewPropertyAnimator(duration: 1.0, dampingRatio: 0.5) {
                self.squareView.center = originalPosition
            }.startAnimation()
        }

        animator.startAnimation()
    }
}

We create a blue square view and a button below it using Auto Layout to position them nicely on the screen. The button triggers the animateSquare function when tapped.

In animateSquare, we use UIViewPropertyAnimator with a spring damping ratio to move the square down by 200 points smoothly with a bounce effect. When that animation finishes, we start another spring animation to move the square back to its original position. This creates a nice spring bounce effect on tap.

Final Result

Completed Screen

-----------------------
| Spring Animation Demo |
|---------------------|
|                     |
|       [■]           |
|                     |
|   [Animate Button]   |
-----------------------

User taps 'Animate Button'.

The blue square moves down with a spring bounce.

Then the square bounces back up to original position.

Stretch Goal

Add a toggle switch to enable or disable the spring animation effect.

💡 Hint

Use a UISwitch and conditionally set the dampingRatio to 0.5 for spring or 1.0 for no spring.

Practice

1. What does the dampingRatio parameter control in a spring animation?

easy

A. How much the animation bounces before settling

B. The total duration of the animation

C. The delay before the animation starts

D. The color of the animated view

Solution

1. Step 1: Understand dampingRatio meaning

   The dampingRatio controls the amount of oscillation or bounce in the animation.

2. Step 2: Relate dampingRatio to bounce effect

   A lower damping ratio means more bounce; a higher ratio means less bounce.

3. Final Answer:

   How much the animation bounces before settling -> Option A

4. Quick Check:

   dampingRatio = bounce amount [OK]

Hint: dampingRatio controls bounce, not duration or delay [OK]

Common Mistakes:

• Confusing dampingRatio with animation duration
• Thinking dampingRatio sets animation delay
• Assuming dampingRatio changes view color

2. Which of the following is the correct syntax to start a spring animation in Swift?

easy

A. UIView.animate(withDuration: 1.0, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 1, options: [], animations: { /* changes */ }, completion: nil)

B. UIView.animate(duration: 1.0, delay: 0, damping: 0.5, velocity: 1, animations: { /* changes */ })

C. UIView.springAnimation(duration: 1.0, damping: 0.5, velocity: 1, animations: { /* changes */ })

D. UIView.animateSpring(withDuration: 1.0, damping: 0.5, velocity: 1, animations: { /* changes */ })

Solution

1. Step 1: Recall UIView spring animation method

   The correct method is UIView.animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:).

2. Step 2: Match parameters and syntax

   UIView.animate(withDuration: 1.0, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 1, options: [], animations: { /* changes */ }, completion: nil) matches the exact method signature and parameter names used in Swift.

3. Final Answer:

   UIView.animate(withDuration: 1.0, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 1, options: [], animations: { /* changes */ }, completion: nil) -> Option A

4. Quick Check:

   Correct method name and parameters = UIView.animate(withDuration: 1.0, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 1, options: [], animations: { /* changes */ }, completion: nil) [OK]

Hint: Look for 'usingSpringWithDamping' in method signature [OK]

Common Mistakes:

• Using incorrect method names like animateSpring or springAnimation
• Missing required parameters or using wrong parameter names
• Confusing options parameter with damping or velocity

3. What will happen when this code runs?

UIView.animate(withDuration: 1.0, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0, options: [], animations: {
    view.frame.origin.y += 100
}, completion: nil)

medium

A. The view moves down smoothly with no bounce

B. The view moves down with a strong bounce effect

C. The view does not move at all

D. The animation causes a runtime error

Solution

1. Step 1: Analyze dampingRatio value

   The damping ratio is 0.2, which is low, so the animation will bounce a lot.

2. Step 2: Understand animation effect

   The view's y position increases by 100, so it moves down with a strong bounce.

3. Final Answer:

   The view moves down with a strong bounce effect -> Option B

4. Quick Check:

   Low dampingRatio = strong bounce [OK]

Hint: Low dampingRatio means more bounce in animation [OK]

Common Mistakes:

• Assuming low damping means no bounce
• Thinking initialSpringVelocity 0 stops movement
• Confusing frame change with no animation

4. Identify the error in this spring animation code:

UIView.animate(withDuration: 1.0, delay: 0, usingSpringWithDamping: -0.5, initialSpringVelocity: 0.5, options: [], animations: {
    view.alpha = 0
}, completion: nil)

medium

A. initialSpringVelocity must be zero

B. Alpha cannot be animated

C. Duration cannot be 1.0 seconds

D. usingSpringWithDamping cannot be less than 0

Solution

1. Step 1: Check dampingRatio valid range

   The usingSpringWithDamping parameter must be greater than or equal to 0.

2. Step 2: Identify invalid value

   Here, -0.5 is invalid and will cause the animation to diverge or behave incorrectly.

3. Final Answer:

   usingSpringWithDamping cannot be less than 0 -> Option D

4. Quick Check:

   dampingRatio >= 0 [OK]

Hint: Damping ratio must be >= 0 [OK]

Common Mistakes:

• Setting dampingRatio below 0
• Thinking initialSpringVelocity must be zero
• Believing alpha cannot be animated

5. You want a view to spring up from below the screen with a quick start and gentle bounce. Which parameter values best achieve this effect?

hard

A. usingSpringWithDamping: 1.0, initialSpringVelocity: 0.0

B. usingSpringWithDamping: 0.2, initialSpringVelocity: 0.1

C. usingSpringWithDamping: 0.8, initialSpringVelocity: 3.0

D. usingSpringWithDamping: 0.5, initialSpringVelocity: 0.0

Solution

1. Step 1: Understand desired animation traits

   A quick start means high initial velocity; gentle bounce means high damping ratio near 1.

2. Step 2: Match parameters to traits

   usingSpringWithDamping: 0.8, initialSpringVelocity: 3.0 has damping 0.8 (gentle bounce) and velocity 3.0 (quick start), fitting the description.

3. Final Answer:

   usingSpringWithDamping: 0.8, initialSpringVelocity: 3.0 -> Option C

4. Quick Check:

   High damping + high velocity = gentle bounce, quick start [OK]

Hint: High velocity = quick start; high damping = gentle bounce [OK]

Common Mistakes:

• Using low damping for gentle bounce
• Setting velocity too low for quick start
• Confusing damping and velocity roles