The Bezier curve, also known as the Bates curve, gave me a headache in high school. Some time ago when I was practicing writing animation, I found that Bezier curve can be used to draw trajectory and define animation curve.
This article explores what Bessel curves really are.
Bezier curve principle
Bessel curve is determined by n points, and its curve trajectory can be obtained by a formula:
Where n represents the order of the Bezier curve, and this formula describes the path of the curve.
Now let’s talk about how bezier’s formula is derived.
First order Bezier curve
Set the moving point in the figure as Pt, t as movement time, t∈(0,1), and the following formula can be obtained
Second order Bezier curve
In second-order Bezier curves, three points are given to be constant (P0,P1,P2). The points in P0P1 are set as Pa, in P1P2 as Pb, and Pt on PaPb. All three points move at uniform speed within the same time t.
It can be known from formula (1)
Substitute formula (2) and (3) into Formula (4), obtain
Third order Bezier curve
Similarly, according to the above derivation process, it can be obtained
It follows from this that
Order N Bezier curve
Put up a website and feel free to draw bezier curves:
Curve drawing
The practical application
Bessel curve has two main applications in the front end. On the one hand, it can be used as an animation curve in CSS3 animation. On the other hand, curves can be drawn on canvas to achieve the desired effect.
Application of Bessel curve in CSS3
In CSS3, there are two attributes that are often used: transition-timing-function and animation-timing-function, which represent the speed of transition and animation respectively. CSS3 provides us with a new tool, Cubic – Bezier (X1, Y1, X2,y2). This tool generates a speed curve that allows our elements to adjust their speed to that curve.
In the above derivation, we know that in Bezier’s formula, there are two points in constant position – P0 and P1. Cubic – Bezier defines the positions of two control points, so the curve is a third-order Bezier curve.
There is a website that allows us to quickly build a Bezier curve: Cubic – Bezier
The relation between Bezier curve and animation curve
Let’s start with a wave chart to get a rough feel for it: example 1:
Example 2:
Example 3:
The bezier curve on the left, where the horizontal axis represents events and the vertical axis represents progress, makes it impossible to intuitively feel the change in speed.
The curve on the right is the animation curve in the control panel, the horizontal axis is time, the vertical axis is speed, you can see the speed change in a way.
In the above example, the forward direction is the positive velocity direction, and the backward direction is the negative velocity direction.
How do I know the change in velocity
derivation
In example 1, Bezier curve is a straight line. When time changes uniformly, progress also increases uniformly, so it can be known that speed is constant and the relationship between time and progress can be expressed by a linear equation:
y=ax+b (a=1,b=0)
Copy the codeX is time, y is progress, and A is speed.
Derivation Case 1
To look at other Bezier curves,
The figure shows a changing curve. We take a small part of it and regard it as a stable and invariable straight line. It is represented by the following linear equation and marked in the figure by red line:
y=ax+b
Copy the codeAccording to the content of mathematics in junior high school, we know that when a>1, the included Angle with X-axis ∈ (45°,90°); When a∈(0,1), the included Angle with the X-axis is between (0,45°). In the same amount of time, the bigger the Angle with the X-axis, the bigger a, the faster the velocity.
Observe the variation trend of the included Angle in the figure above. The Angle gradually decreases to 0, and then gradually increases to 90°. The corresponding speed should be that the speed gradually slows down to 0, and then gradually increases.
Put on animation curves and GIFs to test our theory:
Derivation Case 2
Part of the curve in the following figure is in the fourth quadrant and part is in the first quadrant. How should the corresponding animation curve be derived?
The curve is also regarded as composed of n smooth lines, and the linear equation is used to represent the trend of the line. It can be seen that the direction of velocity A is negative at the beginning, and then it slowly approaches the positive direction. The speed of A also decreases from large to small, and when it is 0, it gradually increases in the positive direction. That is, the curve shows that the element slows down in the opposite direction at first, and accelerates in the positive direction when the velocity is zero.
Verify the above derivation through animated curves and GIfs:
validation
Verify the above results with two curves:
A curve:
Curve 2:
It can be judged from the result that the relationship between Bezier curve and animation curve can be obtained correctly by using the above deduction method.
Application of animated curves
After understanding how to use Bezier curve to specify animation curve, many animation effects related to speed can be realized, such as car acceleration brake, spring animation and other speed trajectory can be customized according to their own needs.
Put on a slow function quick search website, you can make their dynamic effect more real: slow function
Here’s a quick example:
The animation simulates the bouncing process of the ball falling
The code is as follows:
<div class="ground">
<div class="ball" id="ball"></div>
</div>
Copy the code .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%; }}Copy the codeThis kind of animation can refer to the case of online big men:
Bezier curves with CSS3 animation, SVG and Canvas applications
Understand and apply Bezier curves
Draw bezier curves using canvas
Canvas provides an API to quickly draw a Bezier curve to achieve the desired effect:
Second order Bezier 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();
Copy the code
Where moveTo defines the starting point, quadraticCurveTo(x1,y1,x2,y2) is the control point and quadraticCurveTo(x2,y2) is the end point
Third order Bezier 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 (40100200150200); ctx.stroke();Copy the code
MoveTo defines the starting point, bezierCurveTo(x1,y1,x2,y2) (x1,y1),(x2,y2) as the control point,(x3,y3) as the end point.
conclusion
To find out what Bessel curves were and how they related to animation curves and speed, the author ran through the rest of the world’s remaining teachers, saying, “Pat if you’re wrong.
Github.com/hujiulong/b…