Bezier. CSS tool material

Source: Internet
Author: User

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:

    • Online preview of the English version (Lea Verou)
    • Online preview of Chinese version (more effects)
    • Online Generation Series
    • The author's "Loading" library
Reference

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:

Objective

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

Introduction to Ontology

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:

    • P0: Default value (0, 0)
    • P1: Dynamic Fetch value (x1, y1)
    • P2: Dynamic Fetch value (x2, y2)
    • P3: Default Value (1, 1)

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 .

Use

In 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:


Several commonly used fixed values correspond to the cubic-bezierValues and velocity curves
    1. ease: Cubic-bezier (. 25,. 1,. 25, 1)

    2. liner: Cubic-bezier (0, 0, 1, 1)/Cubic-bezier (1, 1, 0, 0)

    3. ease-in: Cubic-bezier (. 42, 0, 1, 1)

    4. ease-out: Cubic-bezier (0, 0,. 58, 1)

    5. ease-in-out: Cubic-bezier (. 42, 0,. 58, 1)

    6. In out. Back (buffer effect): Cubic-bezier (0.68,-0.55, 0.27, 1.55)


Effect reference

The animated effects mentioned in the article can be seen in the site below, and of course you can try it boldly:

    • Online preview of the English version (Lea Verou)
    • Online preview of Chinese version (more effects)
    • Online Generation Series
    • The author's "Loading" library
Reference

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:00
    • Label:
    • Algorithm
    • float/
    • struct/
    • Graphics
    • 42966

Here 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.