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.