Let’s take a look at the animation:

This animation in some live platform is more common, today with JS to achieve this effect.

Analyze the main points of animation:

1. First of all, you need a motion path, that is, a motion path

2. Constantly update the location of DOM nodes along this route

So let’s start with the first line of motion and I’m sure you all know the Bezier curve, yes it is, but let’s take a look at the Bezier curve with some pictures from the Internet.

  • First order Bezier curve

  • Second order Bezier curve

  • Third order Bezier forehead curve

The figure above shows that bezier curve is given a few points into the Bezier curve formula, and then generate a curve, we can use this curve for animation. You can refer to the information for more details about the Bezier curve.

We mainly use third-order Bezier curve to achieve animation effect, and the formula of third-order Bezier curve is as follows:

// t indicates how many points a curve is made up of
// p0, p1, p2, p3 are four points respectively
function bezier(t, p0, p1, p2, p3) {
    const [x0, y0] = p0;
    const [x1, y1] = p1;
    const [x2, y2] = p2;
    const [x3, y3] = p3;
    const x =
        x0 * (1 - t) * (1 - t) * (1 - t) +
        3 * x1 * t * (1 - t) * (1 - t) +
        3 * x2 * t * t * (1 - t) +
        x3 * t * t * t;
    const y =
        y0 * (1 - t) * (1 - t) * (1 - t) +
        3 * y1 * t * (1 - t) * (1 - t) +
        3 * y2 * t * t * (1 - t) +
        y3 * t * t * t;

    return [x, y];
}

Copy the code

For example, bezier(30, [45, 300], [120, 90], [10, 210], [0, 0]) generates a curve like this. The first parameter indicates that the curve is composed of 30 points. Note here that the upper-left coordinate is [0, 0].

We can then create a DOM node and let the DOM node refresh periodically to change its coordinate position and animate it. Git complete code for git complete code