Bezier curves and CSS3 animations, svg, and canvas applications

Brief introduction

Bezier curves can make a lot of complex effects, such as the complex animation of bouncing balls, first speed down, stop, and then bounce back gradually slow effect.

The two URLs commonly used with Bézier curves are as Follows:

Easing function: http://www.xuanfengge.com/easeing/easeing/

cubic-bezier:http://cubic-bezier.com/

How to draw curves with Bezier curves

A standard 3-time Bezier curve requires 4 a point: a starting point, a terminating point (also called an anchor point), and two separate intermediate points.

Regardless of svg, canvas or CSS3 animation, These 4 points are involved.

The combination of SVG and Bezier curves

SVG Scalable vector graphic (scalable vector graphics), two-dimensional, xml tags, similar to the following:

<width= "160px"  height= "160px">  <  d = "M10 ..."/> </svg > 

SVG code is not specifically expanded (it can be serialized several), mention one path of the tags, you can draw any path, nature also includes and Bezier to do the Base.

Three Bezier curve directives: C x1 y1, x2 y2, x y Two control points (x1,y1) and ( x2,y2) , (x,y) representing the end point of the Curve. Letters C denote specific actions and behaviors, which need to be capitalized, representing the standard three-cubic Bezier Curve.

Take a look at some of the following code (fragments) that describe the Bezier curve, and you can get a good sense of it (where the letter M represents a specific action moveTo , which means moving the Drawing's starting point here).

<svgwidth= "190px"Height= "160px">  <PathD= "M10, ten, ten"Stroke= "3"Fill= "none"/>  <PathD= "M70, Ten , ten"Stroke= "3"Fill= "none"/>  <PathD= "M130, ten, ten,"Stroke= "3"Fill= "none"/>  <PathD= "M10", "C"Stroke= "3"Fill= "none"/>  <PathD= "M70 ", "C"Stroke= "3"Fill= "none"/>  <PathD= "M130 (C), "Stroke= "3"Fill= "none"/>  <PathD= "M10-C ,"Stroke= "3"Fill= "none"/>  <PathD= "M70 to the C.Stroke= "3"Fill= "none"/>  <PathD= "M130-C-, "Stroke= "3"Fill= "none"/></svg>

The curve effect is similar to the following picture:

You can see M the back of the starting point, plus the C following 3 points, forming a Bezier curve 4 Point.

The combination of canvas and Bezier curve

Where Canvas has a bezierCurveTo() method, the code is as Follows:

var c=document.getelementbyid ("mycanvas"); var ctx=c.getcontext ("2d"); ctx.beginpath (); ctx.moveto (20,20); Ctx.beziercurveto ( 20,100,200,100,200,20); ctx.stroke ();

Start point: moveTo (20,20) control point 1:beziercurveto (20,100,200,100,200,20) control point 2:beziercurveto (20,100,200,100,200,20) end Points:  Beziercurveto (20,100,200,100,200,20)

The combination of CSS3 animation and Bezier curve

Use the Following:

Transition:cubic-bezier (. 25,.1,.25,1)

The .25,.1 anchor point where this coordinate is connected to the starting point; .25,1 this coordinates the point at the top of the antenna at the end of the Head.

Some people will doubt, CSS3 animation that cubic-bezier value seems to have only two points eh ~ ~

That's because the starting and ending points of the CSS3 animated Bezier curve are fixed, (0,0) respectively (1,1) .

Several animation effects commonly used in css3:

Ease:cubic-bezier (0.25, 0.1, 0.25, 1.0)
Linear:cubic-bezier (0.0, 0.0, 1.0, 1.0)
Ease-in:cubic-bezier (0.42, 0, 1.0, 1.0)
Ease-out:cubic-bezier (0, 0, 0.58, 1.0)
Ease-in-out:cubic-bezier (0.42, 0, 0.58, 1.0)

To achieve the effect of a bouncing ball:

HTML code:

<id= "ball"></div><  ID = "floor" ></ Div >

CSS Code:

Body{margin:0;padding:0;}#ball{background:Red;Height:100px;width:100px;position:Absolute;Top:10px; left:20px;Border-radius:50px;}#floor{position:Absolute;Bottom:10px; left:0px;width:350px;Height:1px;Border-top:5px Solid Brown;}

JS Code:

;(function(){   vardown=false, Trans= ' transition ', EventName= ' Transitionend '; if(typeofdocument.body.style.webkittransition=== ' String ') {trans= ' Webkittransition '; EventName= ' Webkittransitionend '; }Else if(typeofdocument.body.style.moztransition=== ' String ') {trans= ' Moztransition '; }varBall=document.getelementbyid (' Ball ');varFloor=document.getelementbyid (' Floor ');functionBounce () {if(down) {ball.style[trans]= "Top 1s cubic-bezier (0,.27,.32,1)"; Ball.style.top= ' 10px '; down=false; }Else{ball.style[trans]= "Top 1s cubic-bezier (1,0,0.96,0.91)"; Ball.style.top= (floor.offsettop-100) + ' px '; down=true; }}ball.addeventlistener (eventname,bounce); Bounce ();}) ();

Description:Document.body.style.webkitTransition Gets the transition prefixed with WebKit
In the browser of the WebKit engine, thewebkittransitionend event is triggered when the transition animation of CSS 3 finishes executing.

Implementation Results:

: "CSS3 animation: small ball bounce animation"

Summarize

Canvas

Ctx.moveto (0,0); ctx.beziercurveto (x1,y1,x2,y2,n.);

Svg:

<d= "M0 0 C x1 y1, x2, y2, 1 1"/>

CSS3 Bézier starting point is 0,0 ; 1, 1

Cubic-bezier (x1,y1, X2,y2)

Reference address: Bezier vs. CSS3 animations, svg, and canvas

Bezier curves and CSS3 animations, svg, and canvas applications