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
returnsstartValue
.