Lerp in Jetpack Compose

lerp-in-compose.md

Lerp in Jetpack Compose: The Tiny Function Behind Smooth Animations

What is lerp?

Linear interpolation. Given a start, an end, and a fraction t ∈ [0,1], lerp returns a value in between:

lerp(a, b, t) = a + (b - a) * t

• t = 0 ➜ start
• t = 1 ➜ end
• t = 0.5 ➜ the midpoint
• t < 0 or t > 1 ➜ extrapolation (useful for overshoot)

---

Lerp in Jetpack Compose

Compose includes overloads for common types:

• lerp(start: Float, end: Float, t)
• lerp(start: Dp, end: Dp, t)
• lerp(start: Offset, end: Offset, t)
• lerp(start: Color, end: Color, t) (in androidx.compose.ui.graphics)

---

Why use it?

• Sync multiple properties with one timeline (t)
• Build custom motion without complex transitions
• Morph shapes, positions, colors, sizes—all in sync

---

Example

A single fraction animates:

• position (Offset)
• size (Dp)
• corner radius (Dp)
• color (Color)

👉 See LerpBasicsDemo.kt for the full runnable code.

---

Pro Tips

• Clamp t if you want strict bounds; allow overshoot for playful effects.
• Use easing curves to map time ➜ fraction.
• Drive everything from one Animatable(0f..1f) for synchronized motion.