本文為大家分享了Android實現水波紋效果展示的具體代碼,供大家參考,具體內容如下
一、效果
二、實現原理
自定義view,使用Path和貝塞爾曲線繪制,然后不斷刷新,并且改變X、Y的值
主要知識點rQuadTo的使用
三、實現
WaveView.java
public class WaveView extends View { private Paint mPaint; private final Path mPath; //波長 private int wavelength = 500; private int originY=800; private int dx,dy; public WaveView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); mPaint = new Paint(); mPath = new Path(); mPaint.setColor(Color.GREEN); mPaint.setStrokeWidth(5); mPaint.setStyle(Paint.Style.FILL_AND_STROKE);// startanimation(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //重置path mPath.reset();// 改變y的起始坐標 if(dy<originY+150){ dy+=10; } int halfWaveLength = wavelength / 2; mPath.moveTo(-wavelength + dx, originY-dy); //屏幕多寬,畫多少 for (int i = -wavelength; i <= getWidth() + wavelength; i += wavelength) { /** * 相對繪制二階貝塞爾曲線(相對于自己的起始點--也即是上一個曲線的終點 ) * float dx1 相對于上一個曲線的終點 的距離 * float dy1 * float dx2 * float dy2 */ mPath.rQuadTo(halfWaveLength / 2, -150, halfWaveLength, 0); mPath.rQuadTo(halfWaveLength / 2, 150, halfWaveLength, 0); } //顏色填充 //畫一個封閉的空間 mPath.lineTo(getWidth(), getHeight()); mPath.lineTo(0, getHeight()); mPath.close(); canvas.drawPath(mPath, mPaint);// //設置起始點坐標// path.moveTo(100,400);// //二階貝塞爾曲線1// path.quadTo(250,200,400,400);// //二階貝塞爾曲線2// path.quadTo(550,600,700,400);// //關閉路徑(將起點和終點閉合)// path.close();// path.moveTo(100,700);// path.cubicTo(50,500,550,500,700,700); } public void startanimation() { ValueAnimator animator = ValueAnimator.ofInt(0, wavelength); animator.setDuration(1000); animator.setInterpolator(new LinearInterpolator()); //無限循環 animator.setRepeatCount(ValueAnimator.INFINITE); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { dx = (int) animation.getAnimatedValue(); postInvalidate(); } }); animator.start(); }}
最后把這個當成一個控件使用就可以。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答