HTML5 canvas is easy to use-the magic of circular motion: loading animations ~~

When it comes to loading animations, you are no longer familiar with them. Currently, there are three main forms:

1. Bar loading progress bar animation.

 

2. Circular or annular loading animation.

 

3. Personalized loading animation.

 

 

In these three ways, you can change a variety of nice-looking loading animations, especially in the Third Way. As for how to create these animations, we can mainly use browser plug-ins such as static images + JS, dynamic images, Flash, and Silverlight.

 

Today, I don't play with pictures, Flash, or Silverlight. As I mentioned in this article, I am going to play with the HTML5 canvas and use canvas and js to create loading animations, today's animation is mainly carried out through circular motion, so you can also guess that today we are going to create a circular animation for The Ring category. As for other categories, let's start later.

 

Through observation, we can find that a circular animation is an animation that performs circular motion around the center of the circle, in the form:

A ring, and then there are different parts of the ring color on the ring for circular motion on the ring, of course, there can be no ring:

So how can we achieve this through HTML5 + JS?

First, draw a ring as the bottom. Then, let's draw the "band of Light" which is different from the base color that rotates around the center of the circle. The question is how we can draw this "band of light ", this article will simulate this "band of Light" by drawing a series of circles, of course there are other ways, such as drawing an arc.

Two arrays are required to define the "optical band": one is the position of these circles on the ring, and the special here is that the position array is not a coordinate set like [x, y, it is a set of angles, because its position is actually related to the relative angle on the circumference, which is also related to the circular parameter equation.

The other is the transparency array, because we see that the color of the "band" is gradient to transparent.

VaR angle = [90,100,];

VaR alpha = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];

As shown above, we have defined 10 circles in different positions and different transparency to simulate the "optical band ".

Next, let's take a look at the key of today, that is, the parameter equation of the circle:

 

Through this equation, we can find the relationship between angle and coordinate point on the circumference (ring). As long as the angle is changed, the angle changes cyclically from 0 to degrees, then the coordinate point on the circle will change its position along the circumference, but it will always be on the circumference. So we can use these coordinate points to draw small circles on the ring to simulate the "optical band ". As for the proof of the parameter equation, I will not talk about it here. After all, it is not a junior high school mathematics class. The process is so simple. The next step is the tool problem. Our tool today is HTML5 + Js. Go directlyCode:

 

 

We can see from the code that the process is actually simulating the circular motion. To be lazy, I don't want to repeat the operations such as obtaining the canvas context every time, I used a previously encapsulated drawing tool for canvas painting, instead of using HTML5 direct drawing API.

 

Another effect is that there is no "band of light", and the "band of light" is replaced by circles of different sizes in a series of circular motion. All we need to do is modify the above Code, extend the distance between the circle and the circle, and then define the different sizes of each circle. The final code is as follows: