FAB // Utilizing Animated Vector Drawable Animations

The use of the FAB (Floating Action Button) and AVD (Animated Vector Drawables) serve as a powerful combination for prompting user action. These little details can really elevate the user experience in a fun and intuitive way.

I began experimenting with a few different vector drawables to see what type of animations I could come up with. A few common symbols I decided to work with were Plus (+), Cross (x), and Check (√). 

Plus-to-Cross Animation

plus-to-cross.gif

This animation consists of a vector drawable of a Plus Sign and animating that vector to rotate (I set it to rate 225 degrees for added effect). Combining these two make up the AVD, which is referenced in code as the FAB's icon is toggled. 

Cross-to-Check Animation

cross-to-check.gif

This animation was similar to the above, but for the animation, I added two objectAnimators. One to rotate the vector and one to morph the shape of the vector from a Cross (x) to a Check (√). I've provided the XML used in this animation below:

CROSS-TO-CHECK

Vectors Drawables:

Animators:

Animated Vector Drawable:

To best organize the various vector pathData, names, and groupNames, I placed them all in a string resource file here.

To illustrate this animation in a use-case, I created a mock event page concept. The FAB is used to add friends to invite to the event. 

FAB States:

  • Plus: Reveals friends to invite
  • Cross: Hides friends invite list
  • Check: Confirm and send invitation to your selected friends
 
 

Feel free to view this project on my Github page here.

Final note: Nick Butcher's project Plaid is an amazing resource to see what can be done with animations as well as review the source to see how it's done. 

designNick Millwardfab, animation, vectors1 Comment