Animate on a Path with Android Jetpack Compose UI
Article Summary
Phil Boyd from OkCupid shows how to build smooth path animations in Jetpack Compose using just high school math. No complex animation libraries required.
When OkCupid's design team requested arrows flying across the screen in curved paths, their Android team turned to Jetpack Compose. Instead of juggling multiple animation states, they used basic trigonometry and calculus to derive all animation properties from a single state value.
Key Takeaways
- Single state drives position, rotation, and trajectory using sine wave equations
- Derivative calculus calculates arrow rotation to match the curved path naturally
- Slotting pattern enables reusing the animation for multiple objects
- 4000ms linear animation with synchronized x and y offsets from one source
Jetpack Compose lets you create complex path animations by deriving multiple properties from one animated state, eliminating the need to synchronize separate animation specs.
About This Article
OkCupid's design team wanted multiple arrows that would shoot across the screen in curved paths. Android didn't have built-in support for path animations, so developers had to figure out how to coordinate complex animation timing.
Phil Boyd's team used sine wave math to solve this. They applied the formula sin(x * 2π / period) * amplitude along with calculus derivatives to calculate Y-offset and rotation values from a single animated X-offset state. This eliminated the need to synchronize multiple animations.
Instead of managing three separate animation properties, the team derived position, rotation, and trajectory from one state value. The curved arrow animation came together quickly without needing multiple coordinated animation specs.