Android自定義View之水波紋顯示進度效果
阿新 • • 發佈:2019-01-06
@Override protected void onDraw(Canvas canvas) { if (null != backgroundBitmap) { canvas.drawBitmap(createImage(), 0, 0, null); } } private Bitmap createImage() { mPathPaint.setColor(Color.parseColor(mWaveColor)); Paint paint = new Paint(); paint.setAntiAlias(true); Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); //剩餘進度 float currentMidY = height * (maxProgress - currentProgress) / maxProgress; if (currentY > currentMidY) {//每次增長currentY-currentMidY)/10 currentY = currentY - (currentY - currentMidY) / 10; } //清除掉path裡的線條和曲線,但是不會改變它的fill-type mPath.reset(); //移動路徑的起始點到(0 - distance, currentY) mPath.moveTo(0 - distance, currentY); //顯示的區域內的水波紋的數量 int waveNum = width / ((int) mWaveWidth); int num = 0; for (int i = 0; i < waveNum; i++) { //封裝了二階貝塞爾曲線,x1、y1 代表控制點的 x、y,即一個控制點動態圖中的P1,x2、y2 代表目標點的 x、y mPath.quadTo(mWaveWidth * (num + 1) - distance, currentY - mWaveHight, mWaveWidth * (num + 2) - distance, currentY); mPath.quadTo(mWaveWidth * (num + 3) - distance, currentY + mWaveHight, mWaveWidth * (num + 4) - distance, currentY); num += 4; } distance += mWaveWidth / mWaveSpeed; distance = distance % (mWaveWidth * 4); //從上一個點已直線方式連線到座標(width, height) mPath.lineTo(width, height); mPath.lineTo(0, height); //close相當於lineTo到最後一次moveTo的終點構成一條閉合路徑 mPath.close(); canvas.drawPath(mPath, mPathPaint); int min = Math.min(width, height); backgroundBitmap = Bitmap.createScaledBitmap(backgroundBitmap, min, min, false); //取上層非交集部分與下層交集部分 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP)); canvas.drawBitmap(backgroundBitmap, 0, 0, paint); canvas.drawText(currentText, width / 2, height / 2, mTextPaint); return bitmap; }