Design Quickie: Giving User Feedback with AnimatedVectorDrawables
You can do awesome things in Shape Shifter.
With layouts like MotionLayout on the horizon adding to the focus on instructive and meaningful motion in Material Design, it's even more important to have a good handle on some design principles.
This post jumps right in, but if you want a slower tutorial, check out this walkthrough of Shape Shifter.
A common workflow in mobile apps is to give the user positive or negative feedback when their request is evaluated. In the Udacity app, we show this Lottie animation when the student has correctly answered a quiz: a circle with a check mark.
Creating the Shapes
Let's start with the circle. Create one and set the fillAlpha to 0. Make sure it has a stroke on it(1.5).
Now for the the check mark, we can do this two different ways. We can use the vector tool inside Shape Shifter to make a rough check mark.
Or, you could find a check mark SVG file (or create one in another app) and import it.
Animating the Shapes
Most of the animation can be done by animating the trimPath. trimPath works on the stroke or outline of an object. The default trimPathStartand trimPathEnd values are 0 and 1, respectively, to draw the full outline of the object.
Create a trimPathEndanimation on the check mark and animate from 0 to 1. To give it an extra little pop, we can animate the fill alpha for the last bit of the animation as the path closes. Set the initial fillAlphafor the check mark to 0.
This gives us the effect of a shape drawing itself from nothing.
For the circle, we need to do animate the trimPathEndand the animation is complete.
If you need to make the drawing less angular, like this, use some other software to make the checkmark SVG, be it Blender (with Part II of the Shape Shifter series as reference) or some other software.
To create a checkmark, I'd create a circle, delete half of vertices, duplicate it a couple times and create vertices to connect them and use the plugins/tools mentioned in that post to export them.
Finishing Touches
To finish the animation, I changed the colors of the shapes to green and decided to do a small rotation of the outer circle for a little visual variety.
Export to AVD and you're done. :D