I recreated the Google Health app's activity-complete animation for the Wear OS version of my workout tracking app. It took a couple of hours to breakdown their animation but I was finally able to recreate it.
Completion badge shape: MaterialShapes.Cookie9Sided.toShape() from Material 3 Expressive.
Spin animation: One Animatable with three animateTo calls in a row:
- Wind down -180° with
EaseOutCubic. - Whip back up clockwise with
EaseInCubic. - Loop a slow linear 360° forever.
The scale animation runs alongside this spin animation so that it feels like the badge is popping out when it's winding back clockwise.
Particles that fly out from the badge creating an explosion effect: Each particle has an angle, a distance and a speed. When the completion badge winds back up to it's full size, the particles fire and once they settle, each drifts in a tiny circle and orbits around the badge.
The large particles sit on top of the badge. Path.op(particle, badge, PathOperation.Intersect) gives me the overlapping area, which I fill with the Material 3 expressive tertiary color.
Here's the gist of the code: https://gist.github.com/ngcanthony/378d4799bf54655878109a46383de4f7
Happy to answer questions!
submitted by /u/ngcanthony[link] [comments]