Vector Animation in Compose
AnimatedVectorDrawables have been one of the great tools that you can use to add animations to your app, the XML approach and the online tools such as Shape Shifter have made it easy to create and use them, AnimatedVectorDrawables use view animation APIs specifically ObjectAnimator and AnimatorSet, but what if you are using Compose and can't use XML for whatever reason, will you be able to still achieve the same Animations using the Compose Transition APIs? Let’s take a look at an example and try to convert to only use Compose APIs.
Animated Vector Drawable
Just to keep things simple I am going to use a simple Animation:
Animated Vectors in Compose
Image in Compose use what’s called Painter to draw something, there's ColorPainter, BitmapPainter, VectorPainter, etc...
We need VectorPainter since we are going to be drawing a Vector. To create a VectorPainter you can use ImageVector or create rememberVectorPainter, ImageVector is used for static Images and Icons, to create a dynamic vector that may change based on the app state we’ll use rememberVectorPainter
In the Animation above we have two animations:
- Rotation animation of the entire vector
- Morphing animation (PathData)
To achieve those animations I am using updateTransition since we are animating multiple values simultaneously.
Rotation Animation
Rotation is simply a float value, we can use animateFloat function.
Morphing Animation
You can read more about Morphing Animation here, but here we are animating the vector path from M 4.8 13.4 L 9 17.6 M 10.4 16.2 L 19.6 7 to M 6.4 6.4 L 17.6 17.6 M 6.4 17.6 L 17.6 6.4 . Converting that to Compose will result in this:
PathNodes are not a simple value like rotation or translation, so we need another way to animate them. I don’t know how ObjectAnimator is achieving the animation but the solution I found is Linearly interpolating between the PathNodes with a fraction from 0 to 1 (0 is the start of the animation, 1 is the end of the animation), you can read more about Linear Interpolation here. Here I only included the Linear Interpolation of MoveTo and LineTo PathNodes but you can find the rest of the implementation here.
Now comes the animation part:
Drawing
To apply the rotation we need a Group() and to display the PathNodes we use Path() and pass it the result of the Linear Interpolation
Here’s the complete implementation of the animation:
Other Animatable attributes of vectors
Here’s the list of all the animatable attributes of vectors, all the attributes are either a Color, Float or PathNodes, with the implementation above we now can animate all the attributes using Compose Transition APIs.
This implementation may not be perfect so if you have any suggestions feel free to reach out on Twitter @anesabml, you can find the rest of the code here.
I want to thank Al Sutton, Juhani Lehtimäki, Oleksandr Sandul for reviewing this blog post.
