Exploring Animation Curves

Aryaman Sharda
7 min readSep 10, 2023

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.

--

--

Aryaman Sharda

Staff iOS Engineer @ Turo. Previously, Scoop Technologies & Porsche Digital