Flutter's loading animation is more interesting

Preface

We use Stack Component time , You usually use Positioned Components are used as sub components Stack The positioning of ,Positioned adopt top,bottom,height Choose two out of three to determine the position and size in the vertical direction , Use left,right and width Choose two out of three to determine the position and size in the horizontal direction . Corresponding , We can use AnimatedPositioned Component to implement sub components in Stack Mobile in 、 Other effects such as size change . In this article, we use this component to build the animation effect of two ball chasing , In order to fully understand the use of this component .

Effect analysis

You can see from the graph , The blue ball and orange ball will follow the left side of the big white circle first and then 、 Next 、 Right 、 Move the top vertex , At the same time, there will be a pop-up effect when starting the switch . The specific implementation logic is as follows ：

• Along the great circle 4 Point movement effect , We can control the starting position of the ball and we can do it .
• The bounce effect can be used bounceIn Curve realization .
• The effect of chasing one after another , You can set an ordered array of positions , The position of one ball is the next position of another ball , This can be achieved by taking positions from the position array using different subscripts .
• Realization of repetitive dynamic effect ： Repeated dynamic use AnimatedPositioned Of onEnd Trigger &