There is a nice micro-animation library at useanimations.com which contains some useful animations which are particularly well suited for animated icons. These are all free to use and downloadable at Lottie animations. For those that already use Lottie they can use these animations as-is. However using them is apps which don’t use Lottie, or in cases where they may need tweaking and you don’t have a designer available that can perform the necessary tweaks in After Effects, it may not be possible to do this. In this occasional series we’ll look at how to create some of these animations as Animated Vector Drawables which will show some useful AVD techniques.
The next icon that we’ll look at is one named Plus/X from the “Actions” category of useanimations.com which transitions between a + shape and an X shape. This can be seen to the left. Transitioning from a plus to a minus can be quite easily achieved by simply rotating a plus through 45º. However this animation has a much nicer aesthetic because the two perpendicular lines are rotated by different amounts so they behave independently. The vertical line from the plus symbol rotates through 315º making almost a complete rotation before finishing 45º short of where it started. The horizontal line rotates through 135º which is 45º short of half a rotation. The start and end positions both have the two lines offset from each other by 90º so that start and end perpendicular, but the net difference between the start and end positions is that the composite symbol appears to have rotated through 45º, even though the lines which comprise it have actually done something slightly different. The overall effect is quite pleasing though.
Let’s begin by looking at the vector for the plus symbol:
The pathData for each of these paths representing the lines is about as simple as they get. There’s a Moveto command (the Mx,y part), which sets the start position, followed by a either horizontal lineto (the Hx part) or a vertical lineto (the Vy part) which draws either a horizontal or vertical line.
The group elements wrap each of the path elements and are the things that we will actually animate. They have no actual effect on how the plus symbol is rendered but are the key when we come to performing the animation:
If we now take a look at the vector for the X symbol we can see that it is almost identical to the plus, with two changes:
The only things that have changed are the two rotation values, and these should be familiar because they match the angles that we discussed how the two lines were rotated. It renders to this:
I’m sure than many reader will have guessed by now that the transition between these two state is achieved by animating these rotation values. We actually require four animators two (one for each line) when we transition from the plus to the X, and another two (one for each line) when we transition from the X back to the plus.
The first of these rotates the horizontal line through 135º clockwise when we transition from plus to X:
The second rotates the vertical line through 315º clockwise when we transition from plus to X:
The third rotates the horizontal line through 135º anti-clockwise when we transition from X to plus:
The second rotates the vertical line through 315º clockwise when we transition from plus to X:
We now require two `AnimatedVectorDrawable`s. The first transitions from plus to X using two of the animators we just defined:
The other to transition from X back to plus using the other two animators:
Finally we attach these
AnimatedVectorDrawables to drawable state transitions using ananimated-selector:If we use now use this final drawable as the background to any widget which implements
Checkable, then we'll get the transition whenever the checked state is toggled.The source code for this article is available here.
© 2019, Mark Allison. All rights reserved.
Copyright © 2019 Styling Android. All Rights Reserved.
Information about how to reuse or republish this work may be available at http://blog.stylingandroid.com/license-information.
