Effortlessly write your first animation with Jetpack Compose.

Hi 👋

Before you proceed, it is important to read about States in Jetpack Compose.

Recently, I was onto writing my first animation in Jetpack Compose and I got very excited. There are multiple APIs in Jetpack Compose to support different kinds of motion, the official charts can definitely look … overwhelming. In this article we will discuss the the simplest one.

Let’s take an example, the circle should scale down once you hit the button.

Now forget the animation bit, based on the knowledge of States we know that when you update a state, the layout recomposes to reflect the changes. So this code should get us to a point where the circle changes it’s size on hitting the button.

Now we get to animated states. The animateFloatAsState api is perfect. It is a part of the bigger family animate*AsState but Float is the most generic, you can use the other ones for special use cases. You don’t directly change the animated state, you can provide a target and the animated state will follow it with smooth incremental changes.

I am very happy with how simple this is and there is no need to create separate instances of ValueAnimators , then using multiple APIs to control the duration, interpolator and adding listeners to it. You can choose to customise the animation by providing a simple AnimationSpec.

This was a crisp write up based on information from topics I am working on currently, there will be more of these coming in the future so make sure you follow!