Recently a call for help caught my eye; asking how to implement a fancy ‘getting location’ animation on Android:

I immediately thought this was a prime candidate for an AnimatedVectorDrawable (AVD hereafter) so set out to demonstrate one way to implement this. Some people asked how I did this… so here’s a breakdown.

For an introduction to AnimatedVectorDrawable’s capabilities, I highly recommend this post by Alex Lockwood

Outline

Looking at the composition, this is made up of three types of animation:

The pin moves & changes shape to make it jump; AVD supports this by animating the actual shape of a path, known as path morphing. The dots move leftward, this will be a simple translate. The dots fade in/out as the enter/exit the scene.

Tracing

Unfortunately I didn’t have access to the source artwork, just the GIF on dribbble… hopefully you won’t have to do this in your animations!

I opened the GIF in Photoshop which provides a timeline view of the frames of the animation. I stepped through this and saved copies of frames where the pin was at extremes of movement i.e. about to change direction or change shape significantly. These ‘poses’ will be the shapes that the pin will morph between. In total there were 5 major poses.

I pasted each of these into Sketch (my preferred vector drawing tool) and traced out the pin in each of the poses.

The 5 shapes the pin ‘morphs’ between

Some tools can automatically trace raster images and produce vector paths for you. Knowing that I wanted to perform a path morph animation however, meant that I needed ‘compatible paths’; that is each path needs to have the same number and type of points. As such by drawing the pin with a simple shape (made up of 8 points, each with 2 control points) and manually altering it to form each pose I could be sure that we can later animate between the shapes.

I then exported each frame as individual SVG files. Now SVG is a vast spec and Android’s VectorDrawable only supports a subset of it. It’s also helpful to remember that they need to be parsed and rendered on a constrained mobile device; therefore I always try to simplify my SVGs. To do this, I ran them through SVGO (using SVGOMG by Jake Archibald) setting the precision to 1 decimal place.

Jump Around