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 animation that we’ll look at this time is a mail icon where the flap of the envelope opens, and a page inside the envelope appears. For those that have followed this occasional series, this may seem quite straightforward as the techniques that we’ll use are ones that we’ve looked at before. However, there are actually a couple of things which make things a little trickier, and are therefore worthy of discussion.
The first thing to note is the top edge of the envelope. When the flap is closed, the top edge is visible, but as the flap opens, it disappears. The precise moment that it disappears is when the edge of the flap is perfectly horizontal at the mid-point of opening. As is often the case, there are multiple ways that we could achieve this, but I’ve elected to go with sequential animations – multiple animations that run one after the other.
In this case there are actually three separate animations that run one after the other. The first is the flap going from closed state to the halfway point of opening where it overlays the horizontal top edge of the envelope. The second is the flap continuing from there to the fully open state. The third is the page inside the envelope coming in to view.
While the flap opening could be done as a single animation, splitting it to two separate animations allows us to do something a little sneaky. Let’s first take a look at the path data for the closed state:
M8,20 V56 H56 V20 H8 M8,22 L32,40 L56,22 M8,22 L32,40 L56,22The first line is the outline of the envelope itself. M8,20 moves to the top left corner, V56 draws a vertical line downwards representing the left edge of the envelope, H56 draws a horizontal line to the right representing the bottom edge of the envelope, V20 draws a vertical line upwards representing the right edge of the envelope, and H8 draws a horizontal line to the left representing the top edge of the envelope.
The second line is the flap, and this is identical to the third line which is the opening of the envelope through which the page will appear.
The path data halfway point is this – we’ll refer to this as the half closed state:
M8,20 V56 H56 V20 H8 M8,20 L32,20 L56,20 M8,22 L32,40 L56,22Comparing this to the previous path data we can see that only the flap (the second line) has changed, and this will actually draw a horizontal line which overlays the top line of the envelope.
So animating between these two paths is the fist of our three animation phases.
This is where we actually get a little sneaky, and the reason for splitting the animation in two becomes apparent. The starting state of the second phase is actually subtly different from the end state of the first phase – and we’ll refer to this as the half open state:
M8,20 V56 H56 V20 H56 M8,20 L32,20 L56,20 M8,22 L32,40 L56,22The only difference between this and the half closed state is the final command of the fist line – which is drawing the top end of the envelope. In the half open state the X position on the canvas is 56, so the H56 command draws a line to the current position – i.e. it actually draws nothing, so we no longer draw the top edge of the envelope.
The path data for the fully open state is:
M8,20 V56 H56 V20 H56 M8,20 L32,1 L56,20 M8,22 L32,40 L56,22The only change from the half open state to the fully open state is the middle line – the flap transitioning from the halfway point to the open state.
When we run the first phase immediately followed by the second phase the transition between the half closed and half open states happens almost instantaneously – the top edge of the envelope disappears. However at this point the flap is actually drawing over it, so it doesn’t noticeably vanish halfway though. The animator for these two phases is:
This is backed with string resources containing the path data:
. . . M8,20 V56 H56 V20 H8 M8,22 L32,40 L56,22 M8,22 L32,40 L56,22 M8,20 V56 H56 V20 H8 M8,20 L32,20 L56,20 M8,22 L32,40 L56,22 M8,20 V56 H56 V20 H56 M8,20 L32,20 L56,20 M8,22 L32,40 L56,22 M8,20 V56 H56 V20 H56 M8,20 L32,1 L56,20 M8,22 L32,40 L56,22 . . .
The other things worthy of discussion is the appearance of the page inside the envelope. The bit that is a little tricky is making appear as though it is emerging from inside the envelope. We achieve this using a clip path. We’ve looked at these before in this series, but for those unfamiliar with them a clip path declares a region and subsequent drawing operations will only render inside this region. The vector looks like this:
The clip path is positioned after the envelope has been drawn, so does not affect it at all, but is followed by the page. The path data of the clip path matches to the third line of the envelope path which is the opening of the envelope.
If we draw the clip path in red we can see the region within which it will permit the page to be drawn:
The page path data draws a simple rectangle, but the clip path means that only part of this rectangle is actually rendered. If we remove the clip path we can see exactly how we’re animating the page:
The horizontal line in the closed state is outside of the clip path so is never seen when the clip path is in place. It the path data is a rectangle with no height:
M20,44 H44 V44 H20 ZTo show the page we perform a path data animation to a rectangle with height:
M20,26 H44 V44 H 20 ZBut adding the clip path makes all of the difference as the page seems to appear from inside the envelope:
With a small vertical movement of the entire group, we shift downwards as the envelope opens to make room for the opening flap of the envelope which would otherwise open outside of the frame.
As is often the case in this series, we combine a number of different techniques which individually are relatively simple, yet the combination of them make for some quite interesting and pleasing animations.
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.
