Android learning Demo (4) besell curve and page flip

The first time I saw the page turning effect, I thought it was really amazing. I really couldn't figure out how it was done. (alas, the IQ of a cow really can only look up !).

It wasn't until I saw an article on how to implement the book flip effect-principles in Android, and saw an illustration of the flip Effect of Ho minggui. Seeing the beiser curve, I suddenly realized that I could only admire it in my heart.

Let's take a look at the figure below (this figure is just for example, He Ming and GUI, please forgive me ):

Release/y/release + zb/J0tTKtc/release + 8HLoaM8L3A + release/Ix/Oz9tKzsbO4 + s/C0rvSs8f40/release/Oz9s/release + release/release + NPyoaM8L3A + release + 8f6z9 + jrGjOqr/release + 8f6z9 + release/release + 8f6z9 + jrGTOqr/release + s/fo6zS1GTOqr/export/release + compute + compute + 8 rd1_c/compute + compute/compute + CjxwPjxzdHJvbmc + compute /ydLUx/expires + expires/expires + 3c/gjimymdi4kinds/b3H0M61xLaowO2/expires/ix6r/J0tTWsb3TuPm + expires + CjxwcmUgY2xhc3M9 "brush: java; "> private void calculatePoints () {fx = cornerX; // This is one of the four vertices on the interface. You can determine from which vertex to flip fy = cornerY when your fingers fall; gx = (ax + fx)/2; // The G point is the midpoint gy = (ay + fy)/2 of af; float gm = fy-gy; float mf = fx-gx; float em = gm * gm/mf; // calculate the em length ex = gx-em based on the similarity triangle; // calculate the epoint ey = fy; float hm = mf * mf/gm; hx = fx; hy = gy-hm; // Similarly, calculate the h point cx = ex-(fx-ex)/2; // Similarly, the triangle ehf is similar to the triangle cjf, and ag is evenly divided according to cj. Therefore, the proportion on the edge is 2/3. cy = fy; jx = fx; jy = hy-(fy-hy)/2; // same as bx = (ax + ex)/2; by = (ay + ey)/2; // point B is actually AE's midpoint kx = (ax + hx)/2; ky = (ay + hy)/2; // the k point is the midpoint of ah // p middle point of the bc; float px = (bx + cx)/2; // here, the p point is used to find the D point, because this section of the besell curve is symmetric, float py = (by + cy)/2; // obtain the midpoint p of bc and connect it with control point e, the point d passed through is the point dx = (px + ex)/2; dy = (py + ey)/2; px = (kx + jx)/2; // same as py = (ky + jy)/2; ix = (px + hx)/2; iy = (py + hy)/2 ;}
Now that we click it, we can use the quadTo and lineTo of the path, and close to draw the closed besell curve, that is, the area to be drawn.

Canvas. save (); path. reset (); path. moveTo (jx, jy); path. quadTo (hx, hy, kx, ky); path. lineTo (ax, ay); path. lineTo (bx, by); path. quadTo (ex, ey, cx, cy); path. lineTo (fx, fy); path. close (); paint. setColor (Color. GREEN); // draw a GREEN canvas. drawPath (path, paint); canvas. restore ();

Draw path0, start from j to f, and use close to close the curve.

Canvas. save (); canvas. clipRect (canvas. getClipBounds (); // clip the canvas of the entire interface. clipPath (path, Op. XOR); // clip outputs the path0 region, and then extracts the canvas that is not enclosed by path0 according to XOR. drawColor (Color. RED); // draw a RED canvas. restore ();

Take advantage of the exclusive operation (the exclusive operation is actually the place where both of us are occupied, so we cannot give it to you) to cut out the current page.

Finally, use the difference Operation to capture the back part of the page,

Canvas. clipPath (path); pathNext. reset (); pathNext. moveTo (cx, cy); pathNext. quadTo (dx, dy, dx, dy); pathNext. lineTo (ix, iy); pathNext. quadTo (jx, jy, jx, jy); pathNext. lineTo (fx, fy); pathNext. close (); canvas. clipPath (pathNext, Op. DIFFERENCE); // difference extracts the canvas from the two paths. drawColor (Color. YELLOW); canvas. restore ();

In this way, all these areas are taken out. When we Touch, we perform repeated calculations based on the coordinates of the fingers to pull out the page flip effect, when we raised our fingers, we used an animation to flip the page directly.

The following is a Demo. Let's take a look:

Only after completing a relatively simple effect, you need to add images, text, and so on later to truly form a book flip effect.

For source code, click