This article is learned from teacher Zhijia’s open class. ** imitated Taobao’s animation of adding to shopping cart ** to achieve the animation path effect of Bessel curve movement, as shown below.
# frontier:
1. The principle of bezier: https://blog.csdn.net/cdnight/article/details/48468653
Bessel curves also have a place in web development. CSS3 added the transition-timing-function property, which can be set to a cubic Bezier equation. Before this, there were many JavaScript animation libraries that used Bezier curves to achieve beautiful and realistic easing effects.
Here is an example of how to draw a Bessel curve using the De Casteljau algorithm.
Choose 3 non-collinear points in the plane and connect them with line segments in turn.
So let’s pick any point D on the first segment. Calculate the ratio of the distance AD from the point to the beginning of the line segment to the total length AB of the line segment.
According to the ratio obtained in the previous step, find the corresponding point E from the second line segment, so thatAD:AB = BE:BC.
Connect the two points DE.
From the new line segment DE find the same proportion of the point F again, so thatDF:DE = AD:AB = BE:BC.
At this point, we have identified a point F on the Bezier curve. Now, if you think back A little bit to what you learned in high school about limits, let’s move point D on the first segment from starting point A to ending point B and find all the points F on the Bezier curve. After all the points are found, we also have this Bezier curve.
If you can’t imagine the process, watch the animation!
Looking back at the Bezier curve, we call the resulting Bezier curve a quadratic because it takes two rounds of picking points to determine a point on the curve (this is easy to remember, but the degree of the curve is actually determined by the Bernstein polynomials mentioned earlier).
What happens when we have four control points?
It’s the same procedure, except for every point we identify on the Bezier curve, we do three rounds of picking points. As shown in figure,AE:AB = BF:BC = CG:CD = EH:EF = FI:FG= HJ:HI, where point J is a point on the Bessel curve finally obtained.
So what we get is a cubic Bezier curve.
You’ve seen quadratic and cubic curves, and higher bezier curves and you know how to draw them. So can there be a linear Bessel curve that is simpler than a quadratic? What does it look like? Based on the previous introduction, with a little thought, you can guess it. Ha! Ha! It’s a straight line
You can draw curves and you can draw straight lines. Isn’t that amazing? To plot more complex curves, the increase in control points is only linear. This feature makes it not only in the field of industrial design, even people with poor mathematical foundation can be relatively easy to master, such as most graphic artists.
This is not enough to show the true power of Bessel curves. Bessel surfaces, extended to three-dimensional space, and further non-uniform rational B-splines (NURBS) have long been the industry standard of today’s computer-aided design (CAD), no matter we use a variety of products, or see in the cinema, they are indispensable.
2. Bessel Curve demo website: http://cubic-bezier.com
We can drag on this website to see the effect of motion rate of third-order Bezier curve under different parameters
# thought
Wrap the target object (in this case, a soccer image) in two divs, with the soccer IMG tag in the innermost layer.
The inner and outer layers of div animation are set from the horizontal and vertical directions respectively. If the motion time is set the same, two-dimensional motion animation effect can appear, which can theoretically achieve a lot of complex curve effects.
# source code:
` ` `
<! DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title> The front end uses Bezier curves to animate moving curves </title>
<style>
:root{
–main: 200px;
}
.item{
width: var(–mian);
height: var(–mian);
position: absolute;
top: 50px;
left: 20px;
background-color: #00aa00;
border-radius: 50%;
}
.wraper{
Animation: ver-animation 2s 0.5s 2;
Animation-timing -function: Cubic -bezier(0.06,.46, 0, 1.04)
}
.wraper .item{
animation: hor-animation 2s linear .5s 2;
}
@keyframes hor-animation{
0% {
transform: translateX(0px)
}
100% {
transform: translateX(400px)
}
}
@keyframes ver-animation{
0% {
transform: translateY(0px)
}
100% {
transform: translateY(400px)
}
}
</style>
</head>
<body>
<! — Vertical movement –>
<div class=”wraper”>
<! — Horizontal movement –>
<div class=”item”>
<img src=”./images/ball.jpg” style=”width:50px;” />
</div>
</div>
</body>
<script>
</script>
</html>
` ` `
# implement the following effect:
