On the Bezier curve in the front-end technology

I am back again! Gossip doesn't say much, we went straight to the subject. An overview of Bezier curves This is not to say, here to introduce the front end of the three applications, respectively, is used in the CSS3 (transition), Canvas, SVG. The following Bezier curves refer to three-time Bezier.

　　First, CSS3

　　　　Here Bezier is actually the role of transition animation in the way of the speed of the appearance. We all know that the transition animation timing-function default to ease (slow-fast-slow), with more than the linear (constant change). With Bezier curves, we can customize the transition timing-function we want, so CSS3 provides us with a new Dongdong--cubic-bezier (X1,y1,x2,y2), here (X1,y1), (X2,y2) Is the two midpoint of the three-time Bezier curve. Specific usage we can take ease and linear example: Transition:all 3s ease with Bessellay means Transition:all 3s cubic-bezier (. 25,.1,.25,1); Transition: All 3s linear is simpler, that is Transition:all 3s cubic-bezier (0,0,1,1). Transition speed change is plainly the slope of the Bezier curve change, here is a good URL, if you want to know the specific changes in the law of the value of--http://cubic-bezier.com.

　　Second, Canvas

　　　　I don't say much about canvas. Canvas has specifically built a method--beziercurveto () for Bezier curves. If you want to draw a three-time Bezier curve, this method is Ctx.beziercurveto (X1,Y1,X2,Y2,X3,Y3). Because of the nature of the canvas, the Bezier curve is also a path, so you must first move the brush to a point before you can begin to draw the path. So the starting point of the three Bezier curve is not included in this method, but should be defined by the Ctx.moveto (x, Y) before the method. Then the three points in this method are well understood, that is, two intermediate points plus the end point.

　　Third, SVG

　　　　The drawing of SVG is actually very much the same as canvas (the personal feeling that canvas and SVG usage is not very good, that is, the difference is very large). You need to use a path tag for SVG. Add the attribute to the path tag, and the path tag has a total of 10 standard instructions plus a non-standard instruction (interested in Baidu), three times the Bezier curve will need to use the M and C instructions. Specific examples: <path d= "M10 C," "> here" M "means MoveTo," C "means Curveto, is not familiar. That's right. Canvas and SVG are actually very similar in usage. At a glance, or by 4 points in the "do things."

　　　　

On the Bezier curve in the front-end technology