Through the previous article, we have initially learned how to use Compose to make loading animations. To consolidate this knowledge, in this article we will continue to use Compose to make a few more loading animations and deepen the impression. The article is relatively long and you can choose the animations you are interested in to read. Arcs and Circles I don't know what to call this animation, so I just named it randomly. The whole animation process is still quite simple. It consists of two parts: one part is two arcs revolving around the center at speeds from fast to slow, and the other part is a hollow circle in the center whose radius is oscillating between lengthening and shortening in a loop. So basically two cyclic animations can complete it. First we need to define the variables needed for the animation: centerX and centerY are the coordinates of the center of the animation, radius is the radius for drawing the two arcs. Then we create a cyclic animation with values from 0 degrees to 360 degrees: Here we use FastOutSlowInEasing for the speed variation to make the arcs rotate from fast to slow. Next we draw the two arcs in Canvas: Just draw two fan shapes, and add the angleDiff change value to startAngle. The two arcs can rotate. The effect is as follows: Next is the expanding and contracting hollow circle in the middle, which is also a cyclic process. We create another cyclic animation with the range oscillating between 20f and 60f: circleSize is the radius…

Spinning dots I've seen elsewhere online where someone used CSS to create an effect with several dots spinning around the center, each dot sequentially changing in size and transparency. Since CSS can do this, can we create a similar effect using Compose? Let's give it a try. First, since the dots spin around the center, we need to determine the coordinates of the center point and the radius. In the code, centerX and centerY are the coordinates of the center point, radius is the radius of the circle, and mSize gets the canvas size to dynamically update the center point coordinates and radius. We also need a set of angles - these angles will be used to draw the dots around the circumference. angleList stores the angles for drawing each dot. With these angles, we can use the sine and cosine formulas to calculate the center point coordinates for each dot: pointX and pointY are the functions to calculate the center point coordinates for each dot. Using this, we can first draw a circle of dots around the circumference. Now that we've drawn the dots, how do we make them spin and change size and transparency? We can think of this process as continuously changing the size and transparency of each dot as it is drawn. So we can create two more arrays to store the changing radius and transparency values. When drawing each dot, we can use an animation loop to pull values for each dot from the radius and alphaList arrays. This will create the change in size…