On Bezier curve and the implementation of sticky animation in iOS

About Bezier Curve, there are many articles related to the Web, here I mainly want to use a more simple way to understand the Bezier curve, of course, this is only my personal understanding, if there are mistakes in the place also ask you to help point out, so that we can progress together.

Bezier curve, commonly used can be divided into the following categories, 1-order curve, 2-order curve (two function is a kind), 3-order curve, high-order curve.

The general equation is

This is a high-order equation consisting of the n+1 points of the P0~PN.

But if you look at the equation, you may not understand what this thing can do.

Let me begin with the 1-order curve:

Here are a few of the pictures from this article to describe the following:

The 1-order curve, which consists of two endpoints, has no control point, at which point the start of the Bezier curve starts from the endpoint and goes to the other end, and this interval has no control point, so the picture is a straight line.

2-order curve, it is composed of two endpoints plus a control point, at this time, the two end points with the control point of the line generated by two segments, and from two segments of any two points can constitute a new line, but at this time we will not take any two points, In the P0-P1 formed by the polyline and P1-p2 formed by the polyline, so that the points on the P0-P1 and p1-p2 points on the same time, the points on the two lines will move simultaneously, the two moving points produced by the line is a change in the line, And this line is exactly the point at which the Bezier point will pass when it depicts the Bezier curve. Because the line is constantly changing, the lines it depicts become a smooth curve.

The 3-order curve and the higher-order curve, the same as the 2-order curve, 2 or more than 2 control points formed by the points of all the vertices of the broken line respectively, and then in the line formed by these moving points into a n-1, and then re-link the points on the polyline, so recursive, eventually converted to 1 order, As a result, the N-order Bezier curve can be depicted.

All right, let's get to the point where we're going to see the actual effect.

This is my recent open source, is modeled after the American group to do the next draw, you can see this sticky animation is when we slide tableview to produce an animation, here I talk about my implementation of the idea, you see this sticky red view is actually a Bezier curve depicted by the closed graph , we can intuitively see that it is actually a quadratic Bezier curve, and the control point is the center of the entire screen, drawing the coordinates of the control point by getting the ScrollView sliding offset.

Here's a look at the code:

-(void) Scrollviewdidscroll: (uiscrollview *) ScrollView {

cgfloat OffsetY = ScrollView. Contentoffset. Y++;

Refreshheadview. OffsetY = OffsetY;

// asynchronous execution,Setneedsdisplay calls the drawrect method automatically

[refreshheadview setneedsdisplay];

 }

We get to the offset by ScrollView's proxy method and then draw in UIView, Setneedsdisplay This method will make UIView redraw,

#pragma mark Paint

-(void) DrawRect: (cgrect) rect {

// Create a Bézier curve handle

uibezierpath *path = [uibezierpath bezierpath];

// Initialize the path to an initial point

[Path movetopoint:cgpointmake(0, 0)];

Add a line

[Path addlinetopoint:cgpointmake (0, 0)];

    // draw two-dollar curve, general and Movetopoint

    [path addquadcurvetopoint:cgpointmake (self. Frame. Size. Width0) controlpoint:< Span class= "S1" >cgpointmake (self. Frame. Size. Width/2,-_offsety* 1.2

// Close the path

[Path Closepath];

// Create a stroke (Quartz) context

cgcontextref context = uigraphicsgetcurrentcontext();

// Add this path to the Quartz context

Cgcontextaddpath(context, path. Cgpath);

// Set the color itself

[[uicolor redcolor] set];

// Set the path of the fill

Cgcontextfillpath(context);

}

So when I slide, the coordinates of the control point are changing, and moving down the center of the screen makes up the two-time curve we know. A github address is attached below

On Bezier curve and the implementation of sticky animation in iOS