Home > Developer > Web Develop
1, Practical css-Bezier curve (cubic-bezier)-Pinterest. HTML (https://www.jianshu.com/p/d999f090d333)
Several commonly used fixed values correspond to cubic-bezier values and velocity curves ease:cubic-bezier (. 25,. 1,. 25, 1)
Liner:cubic-bezier (0, 0, 1, 1)/Cubic-bezier (1, 1, 0, 0) ease-in:cubic-bezier (., 0, 1, 1) ease-out:cubic-bezier (0, 0,. 58 , 1) Ease-in-out:cubic-bezier (. 0,. 1) in. Back (buffer effect): Cubic-bezier (0.68,-0.55, 0.27, 1.55)
The animated effects mentioned in the article can be seen in the site below, and of course you can try it boldly:
MDN
W3school
1.1. The information in the webpage reply:
Bezier curve generation algorithm-CSDN blog. html (http://blog.csdn.net/gaoyongxing/article/details/5827855) [Web content is also saved below]
2, the Web Data preservation:
Objectivecubic-bezierbefore you know it, you need to know something about the animation in CSS3, which is an animation-timing-function transition-timing-function important part of the.
cubic-bezierAlso known as three times of the Bezier, mainly for animation the generation of the speed curve function, the provisions are cubic-bezier(<x1>, <y1>, <x2>, <y2>) .
We can briefly understand cubic-bezier :
From what we need to know is cubic-bezier the range of values:
What we need to pay attention to is the value of the P1 and P2 two X 轴 points, where the range of values is 0 to 1, when the value is out cubic-bezier of range will be invalidated Y 轴 , the value is not specified, of course, it does not need to be too large.
The most straightforward understanding is that a line will be placed in a range of only 1 of the axes, and two points from the middle to pull (the X-axis value interval is [0, 1],y axis arbitrary), the resulting curve is the speed curve of the animation .
UseIn the test example:
<! DOCTYPE html><Htmllang="ZH-CN" ><Head><Metacharset="UTF-8" ><Title>document</Title><Style> . Animation {Width50px;Height50px;Background-color:#ed3;-webkit-transition:all2s;-o-transition:all2s;Transition:all2s; }. Animation: hover {-webkit-transform:translatex (100px); -ms-transform: translatex (100px); -o-transform: translatex (100px); transform: translatex (100px);} </style></ head><body> <div class= "Animation" ></div></body></HTML> We can see in the browser that when the mouse moves over the element, the element starts to move to the right, starts relatively slowly, then quickly, and moves back to the origin as the original curve.
In the example, when we do not transition add cubic-bezier or otherwise timing-function , the default speed curve is ease , at this point the velocity curve is:
So let's add in the code cubic-bezier(.17, .86, .73, .14) :
....animation { ... -webkit-transition: all 2s cubic-bezier(.17, .86, .73, .14); -o-transition: all 2s cubic-bezier(.17, .86, .73, .14); transition: all 2s cubic-bezier(.17, .86, .73, .14);}...
Refresh the page to observe the effect, you will see the animation in the execution of a very slow movement, before and after the speed is similar, at this time the motion curve is:
cubic-bezierease: Cubic-bezier (. 25,. 1,. 25, 1)
liner: Cubic-bezier (0, 0, 1, 1)/Cubic-bezier (1, 1, 0, 0)
ease-in: Cubic-bezier (. 42, 0, 1, 1)
ease-out: Cubic-bezier (0, 0,. 58, 1)
ease-in-out: Cubic-bezier (. 42, 0,. 58, 1)
In out. Back (buffer effect): Cubic-bezier (0.68,-0.55, 0.27, 1.55)
The animated effects mentioned in the article can be seen in the site below, and of course you can try it boldly:
MDN
W3school
3. Bezier curve generation algorithm-CSDN blog. HTML (http://blog.csdn.net/gaoyongxing/article/details/5827855)
Bezier Curve Generation algorithmreprinted August 21, 2010 01:21:00Here we introduce another classical curve approximation method, called Bezier curve. Must have learned the graphic image should know, so the concept of the problem is not said.
The curve is divided into one/two times/three times/multiple Bezier curves, the reason for this is to better understand the connotation.
A Bezier curve is actually a straight line segment that connects two points.
A quadratic Bezier curve is a parabolic line between two points that controls the shape of the parabolic line using a control point.
Three times Bezier curves, you need a starting point, an end point, and two control points to shape the curve.
For example:
The generic Bezier curve generation algorithm can be simply represented as follows:
| typedef struct { float x; Float y; } point2d; /* CP here is an array of four elements: Cp[0] As the starting point, or the P0 in CP[1] is the first control point, or the P1 in CP[2] is the second control point, or the P2 in CP[3] is the end point, or the P3 in T is a parameter value, 0 <= t <= 1 */ POINT2D Pointoncubicbezier (point2d* cp, float t) { Float AX, BX, CX; Float ay, by, Cy; float tsquared, tcubed; POINT2D result; /* Calculate polynomial coefficients */ CX = 3.0 * (cp[1].x-cp[0].x); BX = 3.0 * (cp[2].x-cp[1].x)-CX; Ax = CP[3].X-CP[0].X-CX-BX; cy = 3.0 * (CP[1].Y-CP[0].Y); by = 3.0 * (CP[2].Y-CP[1].Y)-Cy; ay = cp[3].y-cp[0].y-cy-by; /* Calculates the point value of the t position */ tsquared = t * t; tcubed = tsquared * t; Result.x = (AX * tcubed) + (BX * tsquared) + (CX * t) + cp[0].x; Result.y = (ay * tcubed) + (by * tsquared) + (CY * t) + cp[0].y; return result; } /* Computebezier fill in the POINT2D structure array with the curve points generated by the CP at the control point. The caller must allocate enough space for the output, <sizeof (POINT2D) numberofpoints> */ void Computebezier (point2d* cp, int numberofpoints, point2d* curve) { float DT; int i; DT = 1.0/(numberOfPoints-1); for (i = 0; i < numberofpoints; i++) Curve[i] = Pointoncubicbezier (CP, I*DT); } |
The algorithm can conveniently realize the point interpolation ~ Thus, there is a smooth curve.
There are, of course, many improved ways to quickly achieve curve generation.
4.
5.
Bezier. CSS tool material
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
