Custom animation timing in iOS Swift - Deep Dive

Overview - Custom animation timing

What is it?

Custom animation timing means controlling how fast or slow an animation plays at different moments. Instead of moving at a steady speed, animations can speed up, slow down, or pause to look more natural or interesting. This is done by changing the timing curve that controls the animation's progress over time. It helps make apps feel smooth and polished.

Why it matters

Without custom timing, animations look robotic and boring because they move at a constant speed. Custom timing lets designers create effects that feel alive and responsive, improving user experience. It solves the problem of animations feeling unnatural or jarring, making apps more enjoyable and easier to use.

Where it fits

Before learning custom animation timing, you should understand basic animations in iOS using UIView or Core Animation. After this, you can explore advanced animation techniques like spring animations, keyframe animations, and interactive animations.

Mental Model

Core Idea

Custom animation timing shapes how an animation's speed changes over its duration to create natural and engaging motion.

Think of it like...

Imagine riding a bike on a path where you pedal faster on straight roads and slow down on curves to stay safe and comfortable. Custom animation timing is like choosing when to pedal fast or slow to make the ride smooth and enjoyable.

Animation Progress (0% to 100%)
Time →
┌───────────────────────────────┐
│                               │
│   /\                          │
│  /  \___                     │
│ /       \___                 │
│/            \___             │
│                \_____________│
│                               │
└───────────────────────────────┘

The curve shows speed changes: steep parts mean faster progress, flat parts mean slower.

Build-Up - 6 Steps

1

Foundation

Basic animation timing in iOS

Concept: Animations in iOS use timing functions to control speed over time, usually with simple presets.

In iOS, UIView animations use default timing curves like linear (constant speed) or ease-in/ease-out (slow start or end). For example: UIView.animate(withDuration: 1.0) { view.alpha = 0 } This uses an ease-in-out curve by default, making the fade smooth.

Result

The animation fades the view out smoothly, starting and ending slowly.

Knowing default timing curves helps you understand why animations feel natural or mechanical.

2

Foundation

Understanding timing curves and CAMediaTimingFunction

Concept: Timing curves define how animation progress changes over time using control points.

Core Animation uses CAMediaTimingFunction to customize timing curves with control points between 0 and 1. These points shape a Bezier curve that maps time to progress. For example: let timingFunction = CAMediaTimingFunction(name: .easeInEaseOut) This curve starts slow, speeds up, then slows down again.

Result

Animations using CAMediaTimingFunction follow the custom speed pattern defined by the curve.

Understanding control points lets you create precise speed changes in animations.

3

Intermediate

Creating custom timing curves with control points

🤔Before reading on: do you think you can make an animation speed up then slow down by changing control points? Commit to yes or no.

Concept: You can define your own timing curve by setting four control points to shape the animation speed.

Use CAMediaTimingFunction(controlPoints: Float, Float, Float, Float) to create custom curves. For example: let customTiming = CAMediaTimingFunction(controlPoints: 0.5, 0, 0.5, 1) This curve speeds up quickly then slows down near the end.

Result

Animations using this curve will have a unique speed pattern different from presets.

Custom control points give you full control over animation pacing beyond presets.

4

Intermediate

Using UIViewPropertyAnimator for timing control

🤔Before reading on: do you think UIViewPropertyAnimator lets you change animation speed while it runs? Commit to yes or no.

Concept: UIViewPropertyAnimator allows interactive control of animation timing and progress.

You can create an animator and control its fractionComplete property to adjust progress: let animator = UIViewPropertyAnimator(duration: 2.0, curve: .linear) { view.frame.origin.x += 100 } animator.fractionComplete = 0.5 // halfway through animation animator.startAnimation() This lets you pause, reverse, or scrub animations.

Result

Animations become interactive and can respond to user input or other events.

Interactive timing control enables richer user experiences with responsive animations.

5

Advanced

Implementing custom timing with CAKeyframeAnimation

🤔Before reading on: can you create complex speed changes by specifying multiple keyframes? Commit to yes or no.

Concept: CAKeyframeAnimation lets you define exact progress values at specific times for detailed timing control.

You specify an array of values and keyTimes to control animation steps: let animation = CAKeyframeAnimation(keyPath: "position.x") animation.values = [0, 50, 100, 150] animation.keyTimes = [0, 0.3, 0.6, 1] animation.duration = 2 This means the animation moves quickly at first, then slows down.

Result

Animations follow the exact timing and values you specify, allowing complex pacing.

Keyframe animations provide fine-grained control over timing beyond curves.

6

Expert

Custom timing with CAMediaTimingFunction internals

🤔Before reading on: do you think the timing function maps linear time to nonlinear progress using Bezier math? Commit to yes or no.

Concept: CAMediaTimingFunction uses cubic Bezier curves to map linear time input to nonlinear animation progress output.

The function takes control points P0(0,0), P1, P2, P3(1,1) and calculates progress for each time t by solving the Bezier equation. This transforms uniform time into eased progress, creating acceleration or deceleration effects.

Result

Animations appear smooth and natural because progress changes nonlinearly over time.

Knowing the math behind timing functions explains why certain curves feel more natural and how to design your own.

Under the Hood

Under the hood, animation timing functions map the linear passage of time to a nonlinear progress value using cubic Bezier curves. The system calculates the animation's current state by evaluating this curve at each frame, adjusting the property values accordingly. This process happens on the GPU or main thread depending on the animation type, ensuring smooth visual updates.

Why designed this way?

Cubic Bezier curves were chosen because they offer a simple yet powerful way to represent a wide range of easing behaviors with just four control points. This approach balances flexibility and performance, allowing designers to create natural motion without complex calculations or heavy processing.

Time (t) 0─────────────1
 │
 │
 │
 │
 │
Progress (p) 0─────────────1

Bezier Curve Control Points:
P0(0,0) ──●───────────── P3(1,1)
          / \
         /   \
    P1(x1,y1) P2(x2,y2)

The curve maps input time t to output progress p.

Myth Busters - 3 Common Misconceptions

Quick: Does a linear timing curve mean the animation will always look smooth? Commit yes or no.

Common Belief: A linear timing curve always produces smooth animations because speed is constant.

Reality: Linear timing often looks mechanical and unnatural because real-world motion rarely moves at constant speed.

Why it matters: Using linear timing can make animations feel stiff and reduce user engagement.

Quick: Can you change animation speed halfway by just setting duration? Commit yes or no.

Common Belief: Changing the animation duration after it starts can adjust its speed dynamically.

Reality: Animation duration is fixed at start; to change speed dynamically, you must use interactive animators or keyframe animations.

Why it matters: Misunderstanding this leads to failed attempts at dynamic speed control and buggy animations.

Quick: Does using CAMediaTimingFunction with custom control points guarantee perfect natural motion? Commit yes or no.

Common Belief: Any custom control points will produce natural-looking animations.

Reality: Poorly chosen control points can create jerky or unnatural motion; understanding curve shape is essential.

Why it matters: Without this, developers waste time tweaking curves that degrade user experience.

Expert Zone

1

Custom timing curves can be combined with spring animations to fine-tune both speed and bounce behavior for realistic effects.

2

UIViewPropertyAnimator supports scrubbing animations interactively, which is crucial for gesture-driven interfaces like sliders or drag-and-drop.

3

CAKeyframeAnimation's keyTimes must be strictly increasing and normalized between 0 and 1; otherwise, the animation behaves unpredictably.

When NOT to use

Avoid custom timing curves for very simple animations where default ease-in-out suffices, to keep code maintainable. For highly interactive or physics-based animations, consider using UIKit Dynamics or SwiftUI's animation system instead.

Production Patterns

In production, custom timing is often used for onboarding screens, button feedback, and transitions to create brand personality. Developers combine timing functions with layered animations and interactive controls to build fluid, responsive interfaces.

Connections

Physics - Acceleration and Velocity

Custom animation timing mimics how acceleration changes velocity over time in physics.

Understanding acceleration helps grasp why easing curves speed up or slow down animations naturally.

Music - Tempo and Dynamics

Animation timing curves are like tempo changes in music, controlling speed and intensity over time.

Recognizing this connection helps designers think of animations as rhythmic experiences, not just visuals.

Mathematics - Cubic Bezier Curves

Custom timing functions use cubic Bezier curves, a fundamental math concept for smooth curves.

Knowing Bezier math empowers developers to design precise and complex animation timings.

Common Pitfalls

#1 Animation looks jumpy or unnatural due to incorrect control points.

Wrong approach:

let timing = CAMediaTimingFunction(controlPoints: 1, 1, 0, 0)
// This creates a curve that jumps abruptly.

Correct approach:

let timing = CAMediaTimingFunction(controlPoints: 0.42, 0, 0.58, 1)
// This creates a smooth ease-in-out curve.

Root cause:

Misunderstanding how control points affect the Bezier curve shape.

#2 Trying to change animation speed by modifying duration after animation starts.

Wrong approach:

animator.duration = 5
// Changing duration after start has no effect.

Correct approach:

Use UIViewPropertyAnimator and adjust fractionComplete or pause and restart with new duration.

Root cause:

Believing animation duration is mutable during execution.

#3 Using keyTimes array with values not between 0 and 1 or not increasing.

Wrong approach:

animation.keyTimes = [0, 0.5, 0.4, 1]
// KeyTimes must be increasing and normalized.

Correct approach:

animation.keyTimes = [0, 0.4, 0.7, 1]
// Correctly ordered and normalized keyTimes.

Root cause:

Not following CAKeyframeAnimation's strict keyTimes requirements.

Key Takeaways

Custom animation timing controls how animation speed changes over time, making motion feel natural and engaging.

Timing curves use cubic Bezier control points to map linear time to eased progress, shaping acceleration and deceleration.

UIViewPropertyAnimator and CAKeyframeAnimation provide powerful tools for interactive and precise timing control.

Misusing timing functions or keyframe parameters can cause jerky or broken animations, so understanding their rules is essential.

Expert use of custom timing enhances user experience by creating smooth, responsive, and polished app animations.