With Jetpack compose, you can give your app a smooth look through various animations.

This blog post demonstrates how we can add physics-based animation such as fling and spring animation in Jetpack compose.

What we’re going to implement

1. Spring release animation
2. Fling animation
3. Chain spring animations

At the end of implementation, we’ll achieve…

So Let’s get started…

But first, let’s get familiar with spring animation. Spring is physics-based animation, unlike other animations, it adds a more natural and smooth effect in motion.

In Jetpack compose, we have spring AnimationSpec to customize animations. SpringSpec takes three parameters…

1. dampingRatio — define the bouncy of spring. The lower the damping ratio, the higher the bounciness. The default value is DampingRatioNoBouncy
2. stiffness — is something like animation duration, it defines the speed of spring to the final position. The default value is Spring.StiffnessMedium
3. visibilityThreshold — specifies the visibility threshold.

1. Spring release animation

In this example, we’ll have a vertical draggable Circle, when we release the drag, the circle goes back to its initial position.

Now, let's enable our circle to drag vertically. First, we need to detect touch down event on Circle.

• awaitPointerEventScope — Suspend and install a pointer input block that can await input events and respond to them immediately.
• awaitFirstDown — Reads events until the first down is received.
• awaitPointerEvent — Suspend until a PointerEvent is reported.

Now let’s update offset to move Circle on drag.

So here, we’ve consumed the pointer input event and updated offsetY without animating it with snapTo as we don’t want any animation while dragging circle.

Now let’s implement final step to move Circle back to initial position.

Nothing fancy, we just set targetValue to initial position. Let’s check output now.

Okay, Let’s make it more realistic by adding bounce effect when Circle reach at initial position.

With DampingRatioLowBouncy & StiffnessLowLet’s check the output

Cool !! Full source code available on Github

2. Fling animation

To move view with target position is quite easy, but to animate view with dynamic value is bit tough, for ex, to move view on touch pointer.

In this example we’re going to implement the same with Animatable and SpringSpec

Let’s first detect the touch pointer position with pointerInput Modifier.

This will wait unit event happens and on first down touch event it resume the suspended coroutine and we have position of pointer. Now we just have to animate offset with the pointer position.

Let’s set this offset to our Circle modifier.

And the output…

Full Source code of this example available on Github

3. Chain spring animations

In this example we’re going to implement animation that looks like our views are connected like spring.

Let’s make these circles movable.

This makes our first circle draggable, like this...

Now, it’s time to chain other two circle with our first draggable circle.

To make Circles connected with each other and to have effect like 2nd and 3rd Circles are following 1st circle we’ve setup different damping ratio and stiffness. Let’s see the result.

Nice chain!! Full source code of this example is available on Github.

That’s it.

We’ve implemented really cool animation with springSpec, but that’s just a tiny part of Jetpack compose animation API, as it provides various different ways to make your app smooth and attractive with animations.

Here’s some cool progress/loader animation in Jetpack compose worth having a look at.

That’s it for today. Keep Animating!! 😈

Thanks for your support!
If you like what you read, be sure to 👏 👏👏 it below — as a writer it means the world!
Follow Canopasto get updates on interesting articles!