How to Understand and Apply Bessel Curve

Time:2019-6-3

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.

How to Understand and Apply Bessel Curve

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

How to Understand and Apply Bessel Curve

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

How to Understand and Apply Bessel Curve

Second order Bessel curve

How to Understand and Apply Bessel Curve

How to Understand and Apply Bessel Curve

In the second order Bessel curve, three points are known to be constant (P0,P1,P2Set at P0P1The midpoint is PaAt P1P2The midpoint is Pb,PtAt PaPbAt the point above, all three points are moving at a uniform speed within the same time t.

From formula (1)

How to Understand and Apply Bessel Curve

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

How to Understand and Apply Bessel Curve

Third-order Bessel curve

How to Understand and Apply Bessel Curve

How to Understand and Apply Bessel Curve

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

How to Understand and Apply Bessel Curve

From this we can deduce

How to Understand and Apply Bessel Curve

N-order Bessel curve

How to Understand and Apply Bessel Curve

How to Understand and Apply 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-functionandanimation-timing-functionThese 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-bezierThe 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:

How to Understand and Apply Bessel Curve

Example two:

How to Understand and Apply Bessel Curve

Example three:

How to Understand and Apply Bessel Curve

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.

How to Understand and Apply Bessel Curve

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:

How to Understand and Apply Bessel Curve

How to Understand and Apply Bessel Curve

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.

How to Understand and Apply Bessel Curve

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

How to Understand and Apply Bessel Curve

How to Understand and Apply Bessel Curve

Verification

Use two curves to verify the above conclusion:

Curve 1:

How to Understand and Apply Bessel Curve

How to Understand and Apply Bessel Curve

How to Understand and Apply Bessel Curve

Curve two:

How to Understand and Apply Bessel Curve

How to Understand and Apply Bessel Curve

How to Understand and Apply Bessel Curve

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:

How to Understand and Apply Bessel Curve

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();

How to Understand and Apply Bessel Curve

amongmoveToThe 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();

How to Understand and Apply Bessel Curve

amongmoveToThe 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.

Welcome to the discussion, please give me a compliment and then go on

Recommended Today

On the theoretical basis of SRE

What is SRE? When I first got into contact with SRE, many people thought that it was a post with full stack capability in Google and could solve many problems independently. After in-depth exploration, it is found that SRE can solve many problems, but there are too many problems. It is difficult for a post […]