The Bessel curve, also known as the Bezier curve, once gave me a headache in college high school. When I practiced hand-written animation a few days ago, I found that Bessel curve can be used to draw trajectory and define animation curve.

In this paper, we will explore what kind of Bessel curve exists in the end.

# Bessel Curve Principle

The Bessel curve is determined by n points, and its trajectory can be obtained by a formula.

Among them, n represents the order of Bessel curve, which describes the path of curve movement.

Now let’s discuss how to derive Bessel’s formula.

## First order Bessel curve

Set the point of motion in the graph to P_{t}T is the time of motion, t <(0,1). The following formula can be obtained.

## Second order Bessel curve

In the second order Bessel curve, three points are known to be constant (P_{0},P_{1},P_{2}Set at P_{0}P_{1}The midpoint is P_{a}At P_{1}P_{2}The midpoint is P_{b}，P_{t}At P_{a}P_{b}At the point above, all three points are moving at a uniform speed within the same time t.

From formula (1)

By substituting formula (2) (3) into formula (4), it can be obtained.

## Third-order Bessel curve

Similarly, it can be obtained from the above deduction process.

From this we can deduce

## N-order Bessel curve

Put on a website and feel the drawing process of Bessel curve at will.

http://myst729.github.io/bezi…

# practical application

Bessel curve has two main applications in front-end. On the one hand, Bessel curve can be used as animation curve in CSS3 animation; on the other hand, it can be drawn by canvas to achieve the desired results.

## Application of Bessel Curve in CSS3

In CSS3, two attributes are often used:`transition-timing-function`

and`animation-timing-function`

These two represent the speed of transition and the speed of animation, respectively. CSS3 provides us with a new tool——`cubic-bezier(x1,y1,x2,y2)`

。 This tool can generate a velocity curve, so that our elements can adjust the speed according to the curve.

In the above derivation, we know that in Bessel’s formula, the positions of two points are constant – P0 and P1.`cubic-bezier`

The position of two control points is defined, so the curve is a third-order Bessel curve.

There’s a website that allows us to quickly build a Bezier curve: cubic-bezier

### The Relation between Bessel Curve and Animation Curve

Let’s start with a simple rough feeling of the wave chart:

Example 1:

Example two:

Example three:

On the left is the Bessel curve, the horizontal axis represents the event, and the vertical axis represents the progress. It is impossible to intuitively feel the change of speed.

The right curve is the animation curve in the control panel, the horizontal axis is time, and the vertical axis is speed. We can see the change of speed in an aspect.

In the above example, the forward and backward direction is the positive direction of velocity and the backward direction is the reverse direction of velocity.

### How to Know the Change of Speed

#### Deduction

In example 1, the Bessel curve is a straight line. When the time changes uniformly, the progress increases uniformly. It is shown that the speed is constant and the relationship between time and progress can be expressed by a linear equation.

`y=ax+b (a=1,b=0)`

Where x is time, y is progress and a is speed.

##### Derivation Case 1

Inspired by the above conclusions, we can observe other Bessel curves.

The graph is a changing curve. We take a small section of it as a stable and invariable straight line. It is expressed by the following linear equation and marked with red lines in the graph.

`y=ax+b`

According to the content of junior middle school mathematics, we know that when a > 1, the angle between the X axis and the X axis is < (45, 90); when a < (0, 1), the angle between the X axis and the X axis is (0, 45). In the same time, the bigger the angle with the x-axis is, the bigger the a is, the faster the speed is.

Observing the change trend of the angle in the picture above, the angle gradually decreases to 0, then increases to 90 degrees, and the corresponding speed should be slower to 0, then faster.

Place animated curves and maps to verify our hypothesis:

##### Case 2

The curve part in the figure below is in the fourth quadrant and the part in the first quadrant. How to deduce the corresponding animation curve?

Similarly, the curve is considered to be composed of N smooth lines, and the trend of the line is expressed by linear equation. It can be seen that the direction of velocity a is negative at first, and then slowly approaches the square. The rate of velocity a also decreases from large to small, and then gradually increases to the square when it is zero. That is to say, the curve indicates that the element decelerates in the opposite direction at first, and accelerates in the positive direction after the velocity is zero.

The above deduction is validated by animation curves and motion maps.

#### Verification

Use two curves to verify the above conclusion:

##### Curve 1:

##### Curve two:

It can be judged from the results that the relationship between Bessel curve and animation curve can be obtained correctly by using the above deduction method.

### Application of animation curve

Knowing how to use Bessel curve to specify animation curve, many animation related to speed effects can be achieved, such as car acceleration brake, spring animation and other speed trajectories can be customized according to their own needs.

Put on a slow function quick search website, you can make your action more real: slow function

Let’s take a small example:

The animation simulates the bouncing process of a small ball when it falls.

The code is as follows:

```
<div class="ground">
<div class="ball" id="ball"></div>
</div>
```

```
.ball {
width: 30px;
height: 30px;
background: #000000;
border-radius: 50%;
position: absolute;
top: 0;
left: 50%;
animation: move 4s cubic-bezier(0.36, 1.7, 0.26, 0.61) 1s infinite;
}
@keyframes move {
0% {
top: 0;
}
100% {
top: 90%;
}
}
```

This kind of animation can refer to many cases on the Internet:

Application of Bessel Curve and CSS3 Animation, SVG and Canvas

Understanding and Applying Bessel Curve

## Drawing Bessel Curve with Canvas

The API provided in canvas can quickly draw a Bessel curve to achieve the desired effect:

### Second order Bessel curve

`quadraticCurveTo(x1,y1,x2,y2)`

```
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(40,200,200,20);
ctx.stroke();
```

among`moveTo`

The starting point is defined.`quadraticCurveTo(x1,y1,x2,y2)`

Medium`(x1,y1)`

For the control point,`(x2,y2)`

End point

### Third-order Bessel curve

`bezierCurveTo(x1,y1,x2,y2,x3,y3)`

```
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(40,100,200,150,200,20);
ctx.stroke();
```

among`moveTo`

The starting point is defined.`bezierCurveTo(x1,y1,x2,y2)`

Medium`(x1,y1)`

,`(x2,y2)`

For the control point,`(x3,y3)`

End point

# summary

In order to find out what Bessel Curve is, and how it relates to animation curve and speed, the author runs to review the things that were thrown to the teacher earlier. If you are wrong, please tap /(o)/~~

## Widely publicize

This article is published in Mint Front-end Weekly. Watch & Star are welcome. Please indicate the source for reprinting.