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 very first article in this series covered a repeating animation named Loading V2 which represents an ongoing state such as a loading state. Sine that article was written a new loading state icon was added to useanimations.com named Loading V3. Although the name is similar and the type of loading state that it represents is quite similar, the animation itself is quite different. It is essentially a line following a square shape, but the length of the line changes – the trailing edge takes a little time to catch up with the leading edge as it moves between the corners of the square.
Let’s begin by defining the static
VectorDrawable that will form the basis oc this animation:
The basis for this animation is the square path that the line segment follows. The path element named
pathData that is a simple square. It consists of five distinct drawing commands to render a square path:
M8,8 moves to coordinates 8,8 on the canvas without drawing anything.
V56 draws a vertical line from the current position (8,8 as set by the previous command) down to coordinates 8,56 – we don’t need to specify the x coordinate because it will not change when drawing a vertical line. The case of the
V denotes absolute coordinates but if we wanted to use relative positioning to the current position we could use a lower case
v48 instead which would have exactly the same result. This draws the left edge of the box.
H56 draws a horizontal line from the current position (8,56 as set by the previous command) across to coordinates 56,56. This draws thew bottom edge of the box.
V8 draws a vertical line for the current position (56,56 as set by the previous command) up to coordinates 56,8. This draws the right edge of the box.
Z is a close path – it will draw a line from the current position (56,8 as set by the previous command) back to the first place that we made a mark on the canvas (this was 8,8), and so draws the top edge of the box.
The order of these commands is actually quite important because it will actually govern the direction that the animation will take. The animated GIF shown earlier moves in and anti-clockwise direction, and it is no coincidence that we draw this path in an anti-clockwise direction also.
This renders the following white box:
The rounded corners are the result of the
android:strokeLineJoin="round" attribute on the path element and are, again a key part of the animation. Also of importance is the
android:strokeLineCap="round" although it actually has no effect when we render the entire box as we have here.
The key to animating this to produce the effect that we saw earlier is to draw segments of this path and we achieve this using trim paths. Trim paths are a really useful technique when it comes to animations because they allow us to draw just a section of the path. For this animation we’ll use
trimPathEnd to control which section of the path gets rendered at any time. They both can take a value between 0 and 1 where 0 is the start of the entire path (in this case 8,8 where the first vertical line starts), and 1 is the end of the path (again at 8,8, but actually where the close path ends). The value of
trimPathStart defaults to 0, and that of
trimPathEnd defaults to 1, and that is effectively what is rendered by the static
If we alter these values, we can draw a section of this path. By setting
trimPathEnd="0.8" we get this:
If we consider that a square path consists of four equal length segments, we start at the top left corner, and go in in an anti-clockwise direction, then the top left corner will be at both 0.0 and 1.0 of the entire path, bottom left corner will be at 0.25 of the entire path, the bottom right corner will be at 0.5 of the entire path, and the top right corner will be at 0.75 of the entire path. So by specifying
trimPathEnd="0.8" we’ll draw from just before the bottom left corner until just past the top right corner – which is precisely what we’re seeing here. One thing to note is the rounded caps at the ends of this segment – this is the result of the
With that understanding, then we achieve the animation by animating the values of
trimPathEnd to render different sections of the entire path at different points throughout the animation.
AnimatedVectorDrawable to do this is quite small:
It assigns an animator named
chaser to the
box path that we created in the static
The animator is where is gets a little more verbose:
This may, at first, appear a little daunting, but let’s break it down a little. The parent
objectAnimator contains two
propertyValuesHolders each of which controls how the value of a specific property will change during the animation. The first of these controls the
trimPathEnd value (which is the leading edge of the line segment), and the second is the
trimPathStart value (which is the trailing edge of the line segment). Each of these contains a collection of
keyFrame elements which specify what the value of that property will be at specific points of the animation and the animator will interpolate value between these key frame points.
The animation we require is achieved by using these key frames to control where the start and end points of the line segments will be at any given point within the animation. If you look back at the animated GIF at the beginning of this article (it’s also repeated below) you’ll see that when the segment is at the top left corner it is a small dot, then the leading edge starts moving down towards the bottom left corner, but the trailing edge remains at the top left corner briefly before it starts following.
trimPathEnd value, this starts immediately, but for
trimPathEnd the first
keyFrame holds the value at
0 until fraction
0.05 of the animation length. After that point it starts its journey to the bottom left corner.
Look back at the animated GIF and look at the behaviour as we reach the bottom left corner. The leading edge arrives first and the line segment compresses down to a dot as the trailing edge arrives.
trimPathEnd controls how the value will reach
0.25 (the bottom left corner of the path) at 0.2 of the length of the animation length, and the second
keyFrame will hold the value at
0.25 of the animation length. For the
trimPathStart value we already looked at how this lags behind the
trimPathStart value, and the second
keyFrame for this controls how it reaches a value of
0.25 of the animation length. It is important to keep the value very slightly short of the
trimPathEnd value otherwise the line will disappear momentarily while the start and end values of the trim path are the same.
By offsetting the start and end of the trim path as they traverse the left edge of the path, allows us to create this effect of starting from a dot at the top left corner, the line segment growing and then shrinking back to a dot at the bottom left corner. We then repeat the same process for the other three edges – the concept is identical, just the values and fractions change for each corner. So although the animator initially looked quite daunting, it’s actually the same behaviour repeated four times, and understanding the first quarter of each
propertyValuesHolder is sufficient to understand what’s going on in the rest.
Once we get to the end of the animation, we’re back to a dot at the top left corner, and we specify
android:repeatMode="restart" in the parent
objectAnimator to get it to repeat indefinitely.
When we run the animation we get this:
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.