CSS3 Bezier Curve Implementation

Cubic-bezier curve is an important cornerstone of CSS3 animation. The other is steps (ease, etc. are the special forms of Cubic-bezier), CSS3 cubic_bezier curve limits the position of the two control points, by adjusting the position of the middle two control points can be flexibly obtained the usual animation effect, while the canvas Corresponding support is also provided, and the corresponding tool can be used to obtain the control point parameters of the corresponding cubic Bezier curve according to the desired curve.

While IE (6-9) does not have the corresponding support, in order to be able to get consistent animation effect on each platform, it is unavoidable to manually update the value of the animated object on IE through the cubic Bezier curve of the specified control point parameters on the Internet Explorer.

Simulation Implementation Formula

The Cubic-bezier formula is not a simple y= x formula, but instead introduces a third variable T, because the key in the animation is to calculate the scale, that is, in the total time of a certain point in time to get the corresponding value relative to the final value of the proportion, then only need to get the curve of the 0,1 interval. The curves in [x, y] and [0,1] are obtained through the continuous change of t within the 0,1:

Where P0, P1, P2, P3 are all two-d xy vectors

To take a vector apart represents:

Java code

1. y= (1-t) ^3*p0y + * (1-t) ^2*t*p1y + (1-t) *t^2p2y + t^3p3y /c1>
4. x= (1-t) ^3*p0x + * (1-t) ^2*t*p1x + (1-t) *t^2p2x + t^3p3x

The cubic Bezier used by CSS3 has been limited to dead P0 = (0,0), p3= (), so the formula can be simplified to

Java code

2. var ax = 3 * p1x- 3 * p2x + 1,
4. BX = 3 * P2X- 6 * p1x,
6. CX = 3 * P1X;
10. var ay = 3 * p1y- 3 * p2y + 1,
12. by = 3 * P2Y- 6 * p1y,
14. cy = 3 * P1Y;
18. y= (AY * t + by) * t + cy) * t
22. x= ((AX * t + bx) * t + CX) * t

The formula for increasing efficiency and reducing the loss of computational accuracy has been further changed by Horner's method.

Calculation

A cubic-bezier curve in CSS3 that qualifies a specific control parameter is as follows:

The thing that the animation does is to take the x-axis as the time scale, according to the curve to get the value of the Y axis, and update to the animation object.

Translates to the following question: How to get y based on the above formula in the case of known X.

Ask T

First you need to base the formula

Java code

1. var ax = 3 * p1x- 3 * p2x + 1,
2. BX = 3 * P2X- 6 * p1x,
3. CX = 3 * P1X;
5. x= ((AX * t + bx) * t + CX) * t

In the case of a known x, which is the classical polynomial problem, the value of T can be tried out by Newton method first, and if not (the probability is small) it can be evaluated by a reliable but slow binary method.

Ask Y

After you get t, you can bring another Y formula to the final value Y.

Java code

1. var ay = 3 * p1y- 3 * p2y + 1,
2. by = 3 * P2Y- 6 * p1y,
3. cy = 3 * P1Y;
5. y= (AY * t + by) * t + cy) * t

The above solution is also derived from WebKit WebCore C + + native implementation.

Use contrast

When you pass in the easing settings of an animation, you can pass in the syntax format of the CSS3 Cubic-bezier or pass directly to a specific curve setting (Ease-in ease-out).

JS Code

1. $ (' #xx '). Animate ({
2. left:500
3. },{
4. Duration:2,
5. Easing: ' Cubic-bezier (1,0.22,0,0.84) ' //' ease-in '
6. });

Effect comparison:

Cubic-bezier in Kissy

By contrast, the ease-out and the previous JS implementation of the simple two-curve easeOut is still very different, and the JS implementation and CSS3 native almost the same (the efficiency may be slightly lower), more self-curve comparison can be seen:

Easing for Kissy

CSS3 Bezier Curve Implementation