AnimatedIcons: Archive

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’re going to look at this time is an archive icon which is quite interesting because in the closed state it has a very flat, two dimensional appearance, but in the open state the box lid takes on a three dimensional appearance.

We’ve covered how to create the appearance of a 3D object using VectorDrawable, which is essentially a 2D canvas, in a previous series of articles. While we need to do here is actually much simpler than that, we still need to structure the two static states (i.e. the open and closed states) to make it possible to create a smooth animation between them. Let’s start by looking at the slightly more complicated state: the open state:

The box_body path remains static for both open and closed states, so we’ll focus on the lidpath. This path begins at the vertex on the left where three lines meet (M8,14) it then draws a vertical line upward to the lop left vertex (V4); then a horizontal line right to the top right vertex (H56); followed by a vertical line down to the right vertex where three lines meet (V14); and then a horizontal line left to the left vertex where three lines meet. This is four lines of the front face of the box.

The remaining three path commands draw the part of the lid that gives the 3D appearance. First a diagonal line going down and slightly to the right (L12,21); followed by a horizontal line to the right (H52); and completed by a diagonal line going up and slightly to the right to join up with the right vertex where three lines join (L56,14).

The geometry of this particular shape means that by starting and finishing at the two vertices with an odd number number of lines joining them, we are able to draw this as a single continuous line – with paper and pencil it can be drawn without lifting the pencil from the paper.

The vector closed state differs from this only in the pathData for the lid path:

The four lines representing the front face of the lid are almost identical to before except that they are all shifted downwards, and the height of the front face is very slightly taller to give the illusion of it tilting backwards slightly in the open state. The three lines representing the 3D section change in that the two diagonal lines are now horizontal lines represented by L commands. By flattening these to horizontal lines it means that the this 3D section is collapsed to a horizontal line which exactly matches the horizontal line representing the bottom edge of the front face of the lid. Animating between the open state where this 3D component is visible, and the closed state where the 3D component is collapsed gives the illusion that only the front face is visible in the closed state.

Comparing these two paths shows that each of the individual commands in both paths uses the same actual command but with different arguments, and this means that we can perform a path animation between them:

I won’t bother including the reverse animation because it is identical to this but with the valueFrom and valueTo strings switched.

This is all tied together using an animated selector to trigger the animated transitions between the two states:

While we haven’t covered any new animation techniques here, we have looked at a further example of how to structure our path data to enable animations to be applied. This is the key to nice vector animations when we need to transform path data. Moreover, we’ve covered some useful tricks for giving the impression of transitioning from a 2D share to a 3D one, and vice-versa.

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.