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 icon we’re going to look at this time is a share icon where most of the icon animates to a hidden state leaving a single node which moves to a new position before the parts that were previously hidden are re-shown. On the face of it this at first appears pretty straightforward, but there is actually some complexity that makes is a little more difficult than it may appear. The hiding and re-showing of the main part of the icon is done using a clip path. We’ve used clip paths quite often during this series, so I won’t explain it again here. The clip path that we’ll use is a simple rectangle and we’ll animate the bounds of this rectangle to control what parts of the paths which follow it will actually be rendered. This is where the slight complexity comes it – we don’t want to hide everything, we need to leave one of the circles visible.
Keeping this visible is actually really easy – we just position it before the clip path in the vector:
Where this gets interesting is in the paths following the clip path. The more observant will notice that the paths following the clip path consist of three circles, and two lines. This actually represents the entire shape, and we’re actually drawing an extra circle before the clip path.
There is a bit of smoke and mirrors going on here. When the clip path rectangle is in its fully expanded state (which allows all of the share icon to be rendered) then the extra circle will always be completely aligned with one of the circles that make up the complete share icon. For that reason there will only ever be three circles visible.
So the full sequence is that we start with the entire icon visible, and the extra circle is aligned with the circle in the bottom right. We then animate the clip path to hide the three circles and two lines which follow the clip path in the vector, leaving the one circle visible in the bottom right corner. Next we animate the position if this circle to the centre left position. Finally we animate the clip path rectangle to show the three circles and two lines.
It is important to get the timings right for the offsets of these animations – there is a slight overlap between these animations taking place to make things feel a little more fluid. But if we overlap them too much, then the moving circle will be too far out of position when the underlying shape becomes visible – specifically the circle with which the moving circle will be aligned with in the stable state. I must confess to spending quite a bit of time tinkering with these timings to get something which I felt was just right.
There is actually one point in the animation where a part of the underlying circle becomes visible before the moving circle has reached its final position. But it’s for such a short time it is all but impossible to spot even when you’re looking for it.
If I really wanted perfection, I would add alpha (opacity) changes in to the sequence – make the static circle in the position where the moving circle will come to rest completely transparent during the clip path reveal, and then make it completely opaque once the moving circle had come to rest. But that would only be necessary if the flash of the static circle became too obvious. Which it isn’t, so I haven’t bothered!
This trick of having an extra component to make the animations easier is actually pretty useful. This technique can be used to make so otherwise quite tricky animations much easier.
The source code for this article is available here.
© 2020, Mark Allison. All rights reserved.
Copyright © 2020 Styling Android. All Rights Reserved.
Information about how to reuse or republish this work may be available at http://blog.stylingandroid.com/license-information.
