Ordinary loading is the same, interesting loading is one in a thousand

foreword

In a scenario with a slow network speed, an interesting loading will improve the user's patience and favor the app, and some loadinganimations may even make users want to figure out what the whole animation process is like. However, most of the apps have loadingthe following cookie -cutter effect - commonly known as "circling".

In this article, we use Flutter's PathMetricto play with several interesting loadingeffects.

Effect 1: Ball rolling inside the ring

As shown in the figure above, a small red ball rolls in the blue ring, and the speed is slow when rolling up, and there is a clear acceleration process when rolling down. The idea to achieve this effect is as follows:

• Draw a blue circle and build a circle path with a smaller radius inside the blue circle.
• Make the red ball move along the path defined by the inner ring under animation control.
• Select an animation curve that decelerates in the middle (uphill) and accelerates on both sides.

Here is the implementation code: