Shulou(Shulou.com)06/03 Report--

This article mainly introduces the android Bezier curve how to achieve the wave effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Because I don't know what software to use for recording gif on my phone, I will ignore the effect picture for the time being.

I drew an extra 1.5 waves outside the screen, extending into the screen. And then cycle around and move to the right. There is a wave effect.

So now you just need to draw the wavelength on the left, and then add all the wavelengths through the loop.

The first curve has determined the coordinates of the control point and the end point.

The second curve can also be clearly seen that the end point is at the zero coordinate of the x-axis, the Y-axis is unchanged, and the control point is at the position of 1ap4 of the negative wavelength.

Once you have the up and down curves, the rest can be added directly through the loop

Next, take a look at the code directly.

Public class WaveView extends View implements View.OnClickListener {/ / path private Path mPath; / / Brush private Paint mPaint; / / screen height private int screenHeight; / / screen width private int screenWidth; / / wavelength self-controlled private int waveLength = 800; / / number of wavelengths private int waveCount; / / Control points of Bezier curve private int centerY; private ValueAnimator mValueAnimator; / / offset private int mOffset Public WaveView (Context context) {this (context, null);} public WaveView (Context context, @ Nullable AttributeSet attrs) {super (context, attrs); init ();} private void init () {/ / initialize brush mPaint = new Paint (Paint.ANTI_ALIAS_FLAG); mPaint.setStyle (Paint.Style.FILL); mPaint.setColor (Color.RED); mPath = new Path () } @ Override protected void onSizeChanged (int w, int h, int oldw, int oldh) {super.onSizeChanged (w, h, oldw, oldh); screenHeight = screenWidth / get the screen height screenWidth = h / 2x / get the screen width waveCount = (int) Math.round (screenWidth / waveLength + 1.5) / / number of wavelengths} @ Override protected void onDraw (Canvas canvas) {super.onDraw (canvas); mPath.reset (); / / first move to the leftmost offset is offset mPath.moveTo (- waveLength + mOffset, centerY); for (int I = 0; I < waveCount) The length of the negative wavelength and the offset curve are downward, while the control point plus 60 end point is the negative wavelength length and offset mPath.quadTo (- waveLength * 3x4 + I * waveLength + mOffset, centerY + 60,-waveLength / 2 + I * waveLength + mOffset, centerY). / / then draw the top curve negative wavelength 1 mPath.quadTo 4 curve is up, control point minus 60 mPath.quadTo (- waveLength * 1 waveLength 4 + I * waveLength + mOffset, centerY-60, 0 + I * waveLength + mOffset, centerY);} / / closed path mPath.lineTo (screenWidth, screenHeight); mPath.lineTo (0, screenHeight); mPath.close (); canvas.drawPath (mPath, mPaint) / / set the click time to start the loop setOnClickListener (this) only after clicking;} @ Override public void onClick (View view) {/ / mainly to get the offset mValueAnimator = ValueAnimator.ofInt (0, waveLength); mValueAnimator.setDuration (1000); mValueAnimator.setRepeatCount (ValueAnimator.INFINITE); mValueAnimator.setInterpolator (new LinearInterpolator ()) MValueAnimator.addUpdateListener (new ValueAnimator.AnimatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator valueAnimator) {mOffset = (int) valueAnimator.getAnimatedValue (); / / redraw invalidate ();}}); mValueAnimator.start () }} Thank you for reading this article carefully. I hope the article "how to achieve the Wave effect of android Bezier Curve" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.