Bezier curve is such a curve, it is a smooth curve drawn from the coordinates of four arbitrary points.

In history, people who studied Bessel curves originally designed this vector curve drawing method based on the idea that four points were determined by the known parametric equation of the curve.

Bessel curves are more interesting because of their “rubber band effect”, which means that as points move regularly, the curve will produce a change like rubber band extension, which brings a visual impact.

In 1962, French mathematician Pierre Bezier was the first to study this vector curve drawing method, and gave a detailed calculation formula, so the curve drawn according to such a formula is named after his family name is Bezier curve.

There is a function of bezier curve in CSS

The cubic- Bezier () function defines a Cubic Bezier curve (cubic Bezier).

Bezier curve A curve is defined by four points P0, P1, P2 and P3. P0 and P3 are the beginning and end of the curve. P0 is (0,0) and represents the initial time and state, and P3 is (1,1) and represents the final time and state.

P0: default value (0, 0) P1: dynamic value (x1, y1) P2: dynamic value (x2, y2) P3: default value (1, 1)Copy the code

The most straightforward understanding is that a straight line is placed in the coordinate axis with a range of only 1, and two points are pulled from the middle (the value range of X-axis is [0, 1], and Y-axis is arbitrary), and the resulting curve is the speed curve of the animation.

Several commonly used fixed values corresponding tocubic-bezierAnd the velocity curve

Linear type animation

Transition: all 1000ms Cubic - Bezier (0.250, 0.250, 0.750, 0.750);Copy the code

Ease type animation

Transition: all 1000ms Cubic - Bezier (0.250, 0.100, 0.250, 1.000);Copy the code

Ease-in type animation

Transition: all 1000ms Cubic - Bezier (0.420, 0.000, 1.000, 1.000);Copy the code

Ease-out type animation

Transition: all 1000ms Cubic - Bezier (0.000, 0.000, 0.580, 1.000);Copy the code

Ease-in-out type animation

Transition: all 1000ms Cubic - Bezier (0.420, 0.000, 0.580, 1.000);Copy the code

Finally stick a bezier tool link: web.chacuo.net/css3beziert…