Animations in Jetpack Compose using Transition
In this blog post, we will understand how we can use different types of animations in Jetpack Compose using Transition.
If you are interested in exploring other components in Jetpack Compose you can check out the series of articles that I have written.
Series Pit Stops
- How to make a Scrollable list in Jetpack Compose?
- Handling Clicks in Jetpack Compose
- Creating AppBars in Jetpack Compose
- How to use Tabs in Jetpack Compose?
- Exploring Drawers in Jetpack Compose
- Exploring AdapterList in Jetpack Compose
- Animations in Jetpack Compose using Transition (You are here)
As I mentioned earlier we will be using a composable called Transition to create beautiful animations in this article, so let’s have a look at the method signature of Transition.
TransitionDefinition consists of all the information related to the animation that will be required as we transition from one state to another. We will discuss about it in detail later in the article. initState defines the initial state of the transition when it is undefined it takes the value of the first toState seen in the transition. toState as the name suggests is the next state in our transition. clock is an optional parameter that drives the animation as time changes. onStateChangeFinished is an optional listener to get notified when a state change animation has finished. children is the composable that will be animated.
In a TransitionDefinition we will define all animations and states of the animation we are using. There are few predefined animation builders that we can directly use. Let’s have a look at them first.
Tween
It is used to animate from one value to another by providing the duration of the animation, delay and easing. The following code snippet can be used to create a tween animation in TransitionDefinition.
Physics
It is used to create spring animations, we can provide values for damping ratio and stiffness. The following code snippet can be used to create a physics animation in TransitionDefinition.
Keyframe
It is used to create animations based on values at different timestamps. The timestamps can be defined using the infix function at. We can also provide easing for the animation using the infix function with.
Snap
It used to switch immediately from one animation state to another.
Repeatable
It takes another animation as a parameter and can be used to repeat it as many times as we want.
Now that we have an idea about all the predefined animation builders let’s understand how to create a TransitionDefinition. It basically consists of 3 steps:
Create PropKeys
The first step is to create PropKeys. It is required for each property that needs to be animated so that we can change their values as we move from one state to another. For example, if we require float values then we can use FloatPropKey likewise for different use cases, we can use different types of PropKeys like PxPropKey, ColorPropKey etc.
Create State names
It is recommended to create state names for different checkpoints in the animation. State names are generic so they can be integer, string, enum or anything that you feel suits your use case.
Create the TransitionDefinition
We will be using the animation DSL to create the TransitionDefinition using PropKeys, StateNames and the animation of our choice.
Let’s understand the entire process of creating an animation in Jetpack Compose using an example. In the following code snippet, we have created a TrasitionDefinition.
We have made a PropKey of type float. Our TransitionDefinition has two states start and end. Our PropKey will vary from 0f to 360f. We are using a repeatable animation which uses a tween animation.
Now that we have defined our TransitionDefinition let’s pass it to the Transition composable and perform the animation.
In the above code snippet we have passed our TransitionDefinition and declared the initial and final state of the transition. Then we are using the canvas to draw the animation, we are simply making three concentric circles and passing the state[angle] as a parameter to the drawArc function. The value of state[angle] will vary from 0f and 360f, this is how we are making a circle using the drawArc function.
The result of the above code can be seen in the GIF below.
Conceptually it might seem that there are a lot of steps involved but if you look at the code, you will realize I barely wrote anything.
The code snippets used above are from this repository, feel free to check it out.
Jetpack Compose is still in developer preview, there will be breaking changes in the future so some of the things that I mentioned might change over time.
Thanks for reading! If you enjoyed this story, please click the 👏 button and share it to help others!
If you have any kind of feedback, feel free to connect with me on Twitter.
