Posted on

Advanced Vector Path Animations with Shape Shifter


advanced vector path animations

Hi, I think animations are one of the coolest parts of Android development and animating icons is something really small, short, but you can have fun with them.

 

Animated Vector Drawable

There’s many ways to animate stuff, for icons it’s Animated Vector Drawable, in particular SVG path animations, which are available starting from Android L. You can check this post as an introduction to path animations the simplest way possible. Although that tool has changed, I should update the post as well

SVG’s aren’t easy, especially path animations where you need to have same number of start/end commands. Basically I don’t know anything else currently there to help you with it besides Alex Lockwood‘s Shape Shifter

And using this exact tool I’m going to show how to implement AVD for Android of this animation

advanced vector path animations

If saw this gif in MaterialUp, It’s fun to look at designer’s work, get inspirations. Not to mention, that’s the craziest icon animation I’ve ever attempted to implement. With nice software it’s easier to implement it

Preparation

So first you need to get an icon. I get mine here and if you look for mic icon there – it looks different, square corners which would make implementing this complex animation implementing even harder. That’s what initial looks like

advanced vector path animations

 

This means we need to create our own icon. And choosing good software here is really important. I tried all the different SVG editors. Free desktop, different online one, but there’s nothing even close to Abode Illustrator. It’s not that we’re gonna make some complex stuff in there, it’s just that even simple stuff is easier to do in AI.

Let’s break down animation. Starting with a mic, finishing with 4 dots. Bottom part collapses into 2 dots, top mic part into 2 as well. This means we need 4 different paths and save them as different SVG files to import to Shape Shifter

The coolest part is we’re going to use only strokes in here, which makes process easier. The whole magic is in strokes width and caps.

To make rounded bottom part – it’s one arc and straight like with round cap. Here’s changed version

advanced vector path animations

To make the top part of two paths we can just use vertical straight lines with same round cap. It looks looks just perfect

Implementing Animations

Why did I take the time to explain that SVG preparation process? Because for the most icons it’s not just download/implement animations. You need to break icons into multiple paths and only then you can work with it. In this example we had to make our icon completely

That’s the final animation I got today in Shape Shifter

advanced vector path animations

The listening part is too slow and timing is definitely something to work on. And it’s only one way. Backwards animation is just a reverse. Though I couldn’t save it in AVD

TrimPathStart/End, StrokeWidth

This animation is the key one here. What it does is makes circles from lines and splits mic top into two circles as well. So this trimpath attribute goes from 0 to 1 and what you need here is animate it from 1 to any super small value but 0. Let’s say 1 to 0.005. And it will stop at circle because the whole magic here is in stroke width and cap.

Here’s some sneak peak, highlighted blue part at the bottom is trimPathEnd animation of arc collapsing to a circle

advanced vector path animations

And strokeWidth attribute as part of mic top animation since everything here is strokes

If you really want to get deep into this – watch the video, I implement this whole stuff there

Rotation

Now those cool transitions of circles on the screen can all be implemented with rotation animation. It’s available for groups only, so wrap your paths with groups first

advanced vector path animations

And the core here is a right pivot. You can’t just use center of icon (12,12). I ended up with 2 core groups: bottom (arc, staight line), top part of mic.

For bottom pivot was 12,11 and for top – 12, 8.

TranslateX/Y

Then there’s the final part – some translations. Same, applies for groups only.

Ugly part

This animation is really complex, although I implemented the ‘hard’ part – what’s left is actually some polishing, timing, durations, speeds. That stuff matters just as much to make it look nice

Couldn’t save it as AVD, so can’t share anything now, but when I cope with that and make timings better- I’ll upload it here definitely

 

Thanks for reading, subscribe if you liked the stuff and share with friends if you think they’ll find it interesting!