Custom animation timing in iOS Swift - Mini App: Build & Ship

Build: Animated Circle Screen

This screen shows a circle that moves horizontally with a custom timing curve animation when you tap a button.

Target UI

-------------------------
|                       |
|                       |
|         (●)           |
|                       |
|                       |
|       [Animate]        |
-------------------------

Display a circle shape centered vertically near the left side of the screen.

Add a button labeled 'Animate' at the bottom center.

When the button is tapped, animate the circle moving horizontally to the right side.

Use a custom timing curve for the animation (not linear or ease-in/out).

The animation duration should be 2 seconds.

After animation completes, the circle should stay at the right side.

Starter Code

iOS Swift

import UIKit

class AnimatedCircleViewController: UIViewController {
    let circleView = UIView()
    let animateButton = UIButton(type: .system)

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

        circleView.backgroundColor = .systemBlue
        circleView.frame = CGRect(x: 40, y: view.bounds.midY - 25, width: 50, height: 50)
        circleView.layer.cornerRadius = 25
        view.addSubview(circleView)

        animateButton.setTitle("Animate", for: .normal)
        animateButton.frame = CGRect(x: 0, y: view.bounds.height - 80, width: 120, height: 44)
        animateButton.center.x = view.center.x
        animateButton.addTarget(self, action: #selector(animateCircle), for: .touchUpInside)
        view.addSubview(animateButton)

        // TODO: Add any additional setup if needed
    }

    @objc func animateCircle() {
        // TODO: Implement animation with custom timing curve
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import UIKit

class AnimatedCircleViewController: UIViewController {
    let circleView = UIView()
    let animateButton = UIButton(type: .system)

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

        circleView.backgroundColor = .systemBlue
        circleView.frame = CGRect(x: 40, y: view.bounds.midY - 25, width: 50, height: 50)
        circleView.layer.cornerRadius = 25
        view.addSubview(circleView)

        animateButton.setTitle("Animate", for: .normal)
        animateButton.frame = CGRect(x: 0, y: view.bounds.height - 80, width: 120, height: 44)
        animateButton.center.x = view.center.x
        animateButton.addTarget(self, action: #selector(animateCircle), for: .touchUpInside)
        view.addSubview(animateButton)
    }

    @objc func animateCircle() {
        let endX = view.bounds.width - 90 // 40 padding + 50 width
        let timingParameters = UICubicTimingParameters(controlPoint1: CGPoint(x: 0.68, y: -0.55), controlPoint2: CGPoint(x: 0.27, y: 1.55))
        let animator = UIViewPropertyAnimator(duration: 2.0, timingParameters: timingParameters)

        animator.addAnimations {
            self.circleView.frame.origin.x = endX
        }

        animator.startAnimation()
    }
}

We use UIViewPropertyAnimator to create an animation with a custom cubic Bezier timing curve. This curve is defined by two control points that shape the speed of the animation, making it non-linear and more dynamic than standard ease-in or ease-out.

The circle starts near the left side and moves horizontally to the right side over 2 seconds. The animateCircle() method triggers this animation when the button is tapped.

This approach gives you fine control over the animation timing, making the movement feel more natural or playful depending on the curve.

Final Result

Completed Screen

-------------------------
|                       |
|                       |
|                       |
|                       |
|                       |
|       (●)             |
|                       |
|                       |
|                       |
|       [Animate]        |
-------------------------

When the user taps the 'Animate' button, the blue circle smoothly moves from the left side to the right side of the screen over 2 seconds.

The movement speed changes according to the custom timing curve, making the animation feel dynamic.

After the animation finishes, the circle stays at the right side.

Stretch Goal

Add a 'Reset' button that moves the circle back to the left side with the same custom animation.

💡 Hint

Create another UIButton below the 'Animate' button and implement a similar UIViewPropertyAnimator animation that sets circleView.frame.origin.x back to the starting position.

Practice

1. What does the .curveEaseIn animation option do in UIView animations?

easy

A. Starts the animation quickly and then slows down.

B. Starts the animation slowly and then speeds up.

C. Keeps the animation speed constant throughout.

D. Reverses the animation direction automatically.

Solution

1. Step 1: Understand UIView animation curves

   UIView animation curves control how the animation speed changes over time.

2. Step 2: Identify the effect of .curveEaseIn

   .curveEaseIn means the animation starts slowly and accelerates towards the end.

3. Final Answer:

   Starts the animation slowly and then speeds up. -> Option B

4. Quick Check:

   .curveEaseIn = slow start, speed up [OK]

Hint: EaseIn means slow start, speed up later [OK]

Common Mistakes:

• Confusing .curveEaseIn with .curveEaseOut
• Thinking it keeps constant speed
• Assuming it reverses animation

2. Which of the following is the correct syntax to animate a view's alpha to 0.5 over 0.3 seconds with ease-out timing?

easy

A. UIView.animate(duration: 0.3, options: .easeOut) { view.alpha = 0.5 }

B. UIView.animate(withDuration: 0.3, options: .curveEaseIn) { view.alpha = 0.5 }

C. UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseOut) { view.alpha = 0.5 }

D. UIView.animate(withDuration: 0.3) { view.alpha = 0.5, options: .curveEaseOut }

Solution

1. Step 1: Recall UIView.animate syntax

   The correct method signature is UIView.animate(withDuration:delay:options:animations:completion:). Options must be passed as a parameter.

2. Step 2: Check each option for syntax correctness

   UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseOut) { view.alpha = 0.5 } uses correct method name, parameters, and .curveEaseOut option. Others have wrong method names or misplaced options.

3. Final Answer:

   UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseOut) { view.alpha = 0.5 } -> Option C

4. Quick Check:

   Correct UIView.animate syntax = UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseOut) { view.alpha = 0.5 } [OK]

Hint: Use withDuration and options parameters correctly [OK]

Common Mistakes:

• Using wrong method name like animate(duration:)
• Placing options inside animation block
• Forgetting delay parameter

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

UIView.animate(withDuration: 1.0, delay: 0, options: [.curveEaseInOut]) {
  view.frame.origin.x += 100
}

medium

A. The view moves 100 points to the right, starting fast and slowing down.

B. The view moves 100 points to the right at a constant speed.

C. The view jumps instantly 100 points to the right without animation.

D. The view moves 100 points to the right, starting slow, speeding up, then slowing down.

Solution

1. Step 1: Understand .curveEaseInOut timing

   .curveEaseInOut means the animation starts slowly, speeds up in the middle, then slows down at the end.

2. Step 2: Analyze the animation effect

   The view's x position increases by 100 points over 1 second with ease-in-out timing, so it moves smoothly with acceleration and deceleration.

3. Final Answer:

   The view moves 100 points to the right, starting slow, speeding up, then slowing down. -> Option D

4. Quick Check:

   .curveEaseInOut = slow start & end, fast middle [OK]

Hint: EaseInOut means slow start and end, fast middle [OK]

Common Mistakes:

• Thinking it moves at constant speed
• Confusing easeInOut with easeIn or easeOut
• Expecting instant jump without animation

4. Identify the error in this Core Animation timing code:

let animation = CABasicAnimation(keyPath: "opacity")
animation.duration = 1.0
animation.timingFunction = CAMediaTimingFunction(name: .easeIn)
animation.fromValue = 1.0
animation.toValue = 0.0
view.layer.add(animation, forKey: "fade")

medium

A. The animation is missing a fillMode to keep final state.

B. The timingFunction property expects a string, not CAMediaTimingFunction.

C. The keyPath "opacity" is invalid for CABasicAnimation.

D. The timing function name should be .easeInEaseOut, not .easeIn.

Solution

1. Step 1: Check timingFunction usage

   Using CAMediaTimingFunction(name: .easeIn) is correct and supported.

2. Step 2: Identify missing fillMode

   Without setting fillMode and isRemovedOnCompletion, the animation resets after finishing, so the view returns to original opacity.

3. Final Answer:

   The animation is missing a fillMode to keep final state. -> Option A

4. Quick Check:

   Missing fillMode causes animation to revert [OK]

Hint: Add fillMode and isRemovedOnCompletion to keep final state [OK]

Common Mistakes:

• Assuming .easeIn is invalid timing function name
• Thinking timingFunction needs a string
• Ignoring fillMode and completion behavior

5. You want to create a custom animation that moves a view along a path with a non-linear speed, speeding up then slowing down repeatedly. Which approach best achieves this?

hard

A. Use CAKeyframeAnimation with a custom timing function and path to control speed and position.

B. Use CABasicAnimation with a custom CAMediaTimingFunction using control points for the speed curve.

C. Use UIView.animate with linear curve and manually update position in a timer.

D. Use UIView.animate with .curveEaseInOut option repeatedly in a loop.

Solution

1. Step 1: Understand animation requirements

   The animation needs to follow a path and have complex speed changes (speeding up and slowing down repeatedly).

2. Step 2: Evaluate animation options

   CAKeyframeAnimation allows animating along a path and supports custom timing functions for complex speed control, making it ideal here.

3. Final Answer:

   Use CAKeyframeAnimation with a custom timing function and path to control speed and position. -> Option A

4. Quick Check:

   CAKeyframeAnimation + custom timing = best for complex path and speed [OK]

Hint: Use CAKeyframeAnimation for path + custom speed control [OK]

Common Mistakes:

• Using UIView.animate for complex path animations
• Assuming CABasicAnimation can follow a path
• Trying to manually update position with timers