Android Bezier Curve Realizes Water Ripple Effect

Android Bezier curve realizes water ripple effect Introduction

Android Bezier Curve Realizes Water Ripple Effect

foreword
I have been busy at work recently, and I haven’t updated my articles for a long time. It is a rare National Day holiday. It is now 00:49 am on October 2, 2019. I am writing a simple and practical application of Bezier curves. There are many articles on many technical points. Many predecessors They have been written very well, so if there are any mistakes, please leave a message to correct them. At the same time, you are also welcome to leave a message about the type of technical points you need, and strive to contribute more high-quality technical articles.

Introduction to Bezier Curves


Android Bezier curve.The same thing, many similar articles will introduce what is a Bezier curve, but I will not introduce it here, there are two reasons, one, as mentioned above, many similar articles have already been introduced, and the other is Bezier. The curve is just a formula. If I introduce it, I will borrow the official picture to show the effect of the Bezier curve. So we just need to know that the Android API provides us with a method for drawing second-order Bezier curves and third-order Bezier curves.
renderings
In this paper, the final realization effect is shown in the figure:

Android Bezier curve . We can see from the figure that the water pattern fluctuates continuously and rises. When the rise exceeds the screen, it will automatically initially fluctuate highly. Next, let's see how to achieve this effect.
Implementation process
•what you need to know
The Android API provides us with methods to draw second-order Bezier curves and third-order Bezier curves
绘制二阶贝塞尔曲线的方法是:
/**
* Same as quadTo, but the coordinates are considered relative to the last
* point on this contour. If there is no previous point, then a moveTo(0,0)
* is inserted automatically.
*
* @param dx1 The amount to add to the x-coordinate of the last point on
* this contour, for the control point of a quadratic curve
* @param dy1 The amount to add to the y-coordinate of the last point on
* this contour, for the control point of a quadratic curve
* @param dx2 The amount to add to the x-coordinate of the last point on
* this contour, for the end point of a quadratic curve
* @param dy2 The amount to add to the y-coordinate of the last point on
* this contour, for the end point of a quadratic curve
*/
public void rQuadTo(float dx1, float dy1, float dx2, float dy2) {
isSimplePath = false;
nRQuadTo(mNativePath, dx1, dy1, dx2, dy2);
}

Android Bezier curve.From the source code comments, we can see that the parameters passed by rQuadTo are the relative X coordinates and the relative Y coordinates of the first point and the second point from the previous point.
The quadTo method passes absolute coordinates (as shown below)
/**
* Add a quadratic bezier from the last point, approaching control point
* (x 1,y 1), and ending at (x2,y2). If no moveTo ( ) call has been made for
* this contour, the first point is automatically set to (0,0).
*
* @param x1 The x-coordinate of the control point on a quadratic curve
* @param y1 The y-coordinate of the control point on a quadratic curve
* @param x2 The x-coordinate of the end point on a quadratic curve
* @param y2 The y-coordinate of the end point on a quadratic curve
*/
public void quadTo ( float x1, float y1, float x2, float y2) {
isSimplePath = false;
nQuadTo ( mNativePath , x1, y1, x2, y2);
}

The third-order Bezier curve is similar to the second-order curve :
cubicTo ( float x1, float y1, float x2, float y2,
float x3, float y3)

and
rCubicTo ( float x1, float y1, float x2, float y2,
float x3, float y3)

•new WaveRippleView inherits from View
Since you want to draw, you must initialize the brush and path. The color value of the brush is selected as blue as possible to be similar to the color of sea water, and the brush is set to closed style.
/**
* initialize
* @param context
*/
private void init ( Context context) {
paint = new Paint( );
paint.setColor ( Color.parseColor ("#009FCC"));
paint.setStyle ( Paint.Style.FILL );
path = new Path( );
}

Android Bezier curve.How to draw water ripples


Well, sorry for the audience, I really can't find a good drawing software that can replace the manual freehand drawing, either the mouse operation is too laborious, or the desired effect cannot be achieved.
The rectangle represents the phone screen (this custom view fills the screen by default), and the wavy line represents the water ripple effect.
A piece of water ripple is the curve AD, we only need to make this curve keep rolling to realize the water ripple animation. Curve AD We can use Bezier curve to draw curve AC and curve CD respectively. The reason why we start drawing from outside the screen is because the water ripples need to fluctuate constantly. To ensure that the water ripples can be seen at any time, we need to draw them on the screen. The front and rear and inside the screen are filled with water ripples.
Set the height of the water ripples WAVE_HEGHT to 100, the length of the curve AD that is the wavelength of the water ripples WAVE_LENGTH to 1500 (the specific value is modified according to the display effect)
Set the starting point Y point wavestartY to 400;
/**
* length of corrugation
*/
private final static int WAVE_LENGTH = 1500;
/**
* The height of the ripples
*/
private final static int WAVE_HEGHT = 100;
/**
* starting point y coordinate
*/
private static int wavestartY = 400;

•Calculate ABCD point coordinates
To draw the AD curve, the most important thing is to calculate the coordinates of ABCD. According to our definition, it is not difficult to get
The coordinates of point A are (-WAVE_LENGTH, wavestartY )
The coordinates of point B relative to point A are (WAVE_LENGTH / 4, -WAVE_HEGHT)
The coordinates of point C relative to point B are (WAVE_LENGTH / 2, 0)
And so on:
path.moveTo (- WAVE_LENGTH+dx , wavestartY );
for (int i = -WAVE_LENGTH; i < getWidth ( ) + WAVE_LENGTH; i = i + WAVE_LENGTH) {
path.rQuadTo (WAVE_LENGTH / 4, -WAVE_HEGHT, WAVE_LENGTH / 2, 0);
path.rQuadTo (WAVE_LENGTH / 4, WAVE_HEGHT, WAVE_LENGTH / 2, 0);
}
canvas.drawPath (path, paint);

At this point, run the code and the effect is as shown in the figure:

At this point, we see that the AD curve is drawn back. In order to look more like water ripples, we also need to connect the gap below between points D and A.
path.lineTo ( getWidth (), getHeight ());
path.lineTo (0,getHeight());
path.close ();

After connecting, the operation effect is as shown in the figure:

•Let the water ripples fluctuate
Water ripple is actually a simple attribute animation. We will not introduce the animation in detail here. You can move to my previous article.
/**
* Water ripple property animation
*/
public void startAnim ( ){
final ValueAnimator valueAnimator = ValueAnimator.ofInt(0,WAVE_LENGTH);
valueAnimator.setDuration(2500);
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate ( ValueAnimator animation) {
dx = (int) valueAnimator.getAnimatedValue ();
postInvalidate ( );
}
});
valueAnimator.start ();
}

Remember to set the animation interpolator here to make the animation look smoother.
animation is redrawn every time it is executed. It should be noted that the starting point of the drawing becomes
path.moveTo (- WAVE_LENGTH+dx , wavestartY );

Execute the animation, the running effect is as shown in the figure:
Finally, we make the water ripples rise and you're done. The rise of the water ripples just raises the y starting point when drawing, so we make the starting point of the drawing decrease by one pixel each time we draw.
When the value is less than 0, reset to the initial value of 400.
wavestartY = wavestartY - 1;
if ( wavestartY <= 0){
wavestartY = 400;
}
}
path.moveTo (- WAVE_LENGTH+dx , wavestartY )

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00