Exploring Animation Curves

Between my recent SwiftUI projects and YouTube content, animations have become a crucial part of my work. So, I’ve been down a bit of an animation rabbit hole lately…

We’ll start with the basics — from linear animations to easing curves — and then we’ll dive into creating custom animations from scratch. Whether you’re a designer aiming for delightful user experiences or a developer focused on effective animation, this post has you covered.

Linear Animation & Linear Interpolation

At its core, linear interpolation (lerp) smoothly transitions between two values over a fixed time, creating a consistent, constant-speed motion. This forms the basis of linear animation where objects move uniformly from A to B.

Let’s see what this looks like in code:

• startValue is the starting value of the animation (i.e. alpha, x, width, etc.).
• endValue is the ending value of the animation.
• progress is a parameter that ranges from [0,1] and represents how much of the animation's duration has elapsed.

func lerp(startValue: CGFloat, endValue: CGFloat, progress: CGFloat) -> CGFloat {
    return startValue + (endValue - startValue) * progress
}

• When progress = 0, lerp returns startValue.