Analysis of the Fab of interactive animation effect in material design

To get to the point, first look at the effect:

This is based on the Fab case where I am currently working on a music player as a functional prototype:

When the tentative button on the "Playing music" bar at the bottom is triggered, the current music pauses, and the music bar folds to form a rounded floating button, and when you click the Play button that Fab represents, Fab expands to the "playing music" bar and continues to play the music.

Google describes it in its materialdesign guideline as:

Toolbar

The floating action button can transform into a toolbar upon press or a toolbar upon. The toolbar can contain related actions, text and search fields, or any other items that would is useful at hand.

After referencing the guideline, I have drawn a transition animation reference like this:

Through the above mirror sketch can be seen, the past animation effect is actually divided into two parts:

"Offset" and "expand". The scope of "expand" is also limited to the diameter range of the FAB circular button.

It can be seen from this that the scope of the fab extension should be the special attention we need.

In the production of pixate, we can make use of the clipping attribute of the bottom column layer +fab The property of the resource itself to produce the corresponding effect:

(in order to facilitate the location of the corresponding and identification, I set the bottom column to red)

Because the clipping property is only a one-time switch, it cannot be opened based on the activity properties of the related level. So once a fab expansion is fixed, the state of the bottom right corner of the fab is not displayed properly.

For this we need to solve this problem with a small camouflage:

　　1. Reproduce Two fab

A permanent display area (FAB) as a normal state; a transition animation effect (fab Effect) that is used only with extensions.

　　2. Set up fab and fab effect alternately

Click the fab to move to fab effect coordinates and disappear transparently, when fab effect displays and completes the expanded animation effect. (when it is closed or vice versa)

(For reference layer settings and location layouts)

The next step is to test your patience and detail, and how to adjust the duration (animation cycle) and delay (delay) values of the two fab alternating between them.

　　Tips:

1. Finally, when the fab and fab effect interact excessively, it is recommended that the circular curve properties under ease in and ease out be used to demonstrate the displacement of the fab.

2. If you are careful enough, you will notice that I have disconnected the playback button and fab into two resource elements. Because you can control the playback button to show excessive and time individually when you put it into a round button. The main purpose is not to be affected by residual shadow and feel the change is more blunt. And will make the excessive animation produce more vivid.

I hope that the above ideas I have provided will help you. I will also be in the future to add more on the pixate on the materialdesign interactive animation effect of experience sharing.

Thank you!