Android Custom view--realizes water ripple effect similar to residual flow ball

Recently suddenly preface want to make a Bezier curve to do a water ripple effect to play, finally Kung Fu does not bear the final realization of the desired effect, together to see it:

Zhen Lou

A: First step to break down the implementation of the process

1. Need to draw a sinusoidal (sin) or cosine curve (COS)
2. The effect of a horizontal translation curve to a wave like a wave
3. Horizontal movement also requires a rise in the water level, which translates upward
4. Crop the canvas as a circle and draw a curve in the circle area
5. It can be achieved by 4 steps above.

Two: Now to achieve the first step, draw a sin curve; here is a picture to help understand that in Photoshop we draw a Bezier curve to see its control points clearly.

??? To draw a Bezier curve we have to know three points: The starting point, the control point, the end point; With these three points we can draw a simple quadratic Bezier curve. We can see that the starting point P1 x1 These three points draw a curve, which is to add a curve path through the Path.quadto () function.
??? Suppose we need to draw a period of sin curve, then we just need to know the starting point, a period of width, amplitude, you can draw a sin curve.

Three: The following to see the actual operation of the code, here is directly omitted some brush initialization operation can click here to view the source

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); //获取view的宽度 width = getViewSize(800, widthMeasureSpec); //获取view的高度 height = getViewSize(400, heightMeasureSpec); //获取起点坐标 startPoint = new Point(0, height / 2);}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

The first thing is to get to the size of the canvas to determine the coordinates of the starting point, with the starting point coordinates can begin to draw our curve.

To draw a curve in the OnDraw () function

/*sin curve 1/4-cycle Width */Privateint cycle =200;Height of/*sin curve amplitude */Privateint waveheight =200;@OverrideProtectedvoidOnDraw (canvas canvas) {Super.ondraw (canvas); Path.moveto (Startpoint.x, STARTPOINT.Y);Int J =1;Loop to draw a sinusoidal loop one half cyclefor (int i =1; I <= 8; i++) {if (i% 2 = = 0) {//Crest Path.quadto (startpoint.x + (cycle * j) ), Startpoint.y + waveheight, Startpoint.x + (cycle * 2) * I, STARTPOINT.Y); } else {//trough path.quadto (startpoint.x + (cycle * j), Startpoint.y-waveheight, Startpoint.x + (cycle * 2) * I, STARTPOINT.Y); } j + = 2;} //draws a closed curve path.lineto (width, height); //lower right corner path.lineto (startpoint.x, height); //lower left corner Path.lineto (Startpoint.x, STARTPOINT.Y); //start Path.close (); Canvas.drawpath (path, paint);}       

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30

After one of the above examples, a water ripple effect comes out.

Four: The next step is to move the curve horizontally, in order to move it more nicely, we need to start drawing a cycle outside the screen, as follows:

When initializing, move the starting point to a period outside the screen StartPoint=New Point (-cycle*4, height /2); //to decide whether to translate a period if (Startpoint.x + 40 >= Span class= "Hljs-number" >0) {//full one cycle restores the default starting point to continue panning StartPoint .x = -cycle * 4;} //the shift amount of each waveform 40startpoint.x += Span class= "Hljs-number" >40;postinvalidatedelayed (150);p Ath .reset ();             

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

This is the only way to produce a water wave effect, and to see it together.

Five: The next step is to turn the canvas into a circle (in fact, it is a rectangle, just the painting area in the area you cut), and then the water ripple in the inside of the Oh K, the complete drawing code is as follows:

@Overrideprotected void OnDraw (canvas canvas) {Super. OnDraw (Canvas); Crop the canvas as a circular path Circlepath = new Path (); Circlepath. addcircle (Width/2, Height/2, Width/2, Path. Direction. CW); Canvas. Clippath (Circlepath); Canvas. Drawpaint (Circlepaint); Canvas. drawcircle (Width/2, Height/2, Width/2, Circlepaint); The following operations are done in this circular canvas//change the starting coordinates based on progressY-Value StartPoint. y = (int) (Height-(Progress/100.0 * height)); Origin Path. MoveTo (StartPoint. x, StartPoint. Y); Int J =1; Looping a sinusoidal loop once for half a period for (int i =1; I <= 8; i++) {if (i%2 = =0) {Path. Quadto (StartPoint. x + (Cycle * j), StartPoint. Y + waveheight, StartPoint. x + (Cycle *2) * I, StartPoint. Y); } else {Path. Quadto (StartPoint. x + (Cycle * j), StartPoint. Y-waveheight, StartPoint. x + (Cycle *2) * I, StartPoint. Y); } J + =2; }//Draw closed curve path. LineTo (width, height);//Lower right corner path. LineTo (StartPoint. x, height);//lower-left corner path. LineTo (StartPoint. x, StartPoint. Y);//start path. Close (); Canvas. DrawPath (path, paint); DrawText (canvas, textpaint, Progress + "%") .x + 40 >= 0) {//full cycle restores the default starting point continue panning Startpoint4;}//Shift amount per waveform 40 Startpoint.x + = 40; if ( AutoIncrement) {if (Progress >= 100) {progress = 0; } else {Progress++150) ; Path.reset () ;       

Android Custom view--achieve water ripple effect similar to remaining flow ball