实现方法是结合贝塞尔曲线和Xfermode，核心是利用path的offset()方法，不断偏移path
代码语言：javascript
复制/**
* 水波纹进度条
*/
public class BezierProgressView extends View {
private float progress;
private float maxProgress;
private int radius;
private int circleColor;
private int waveColor;
private int textColor;
private int textSize;
private Paint roundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Paint wavePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
int width, height;
float centerX, centerY;
//背景圆的缓冲
private Bitmap roundBitmap;
//需要和水波纹做Xfermode处理的缓冲
private Bitmap xfermodeDstBitmap;
private Canvas XfermodeCanvas;
private float blurRadius = 15;
private Path wavePath = new Path();
private LinearGradient linearGradient;
private float offset = 0;
//水波纹速度
private float speed = 3;
public BezierProgressView(Context context) {
this(context, null);
}
public BezierProgressView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public BezierProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setLayerType(LAYER_TYPE_SOFTWARE, null);
TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.BezierProgressView);
progress = typedArray.getFloat(R.styleable.BezierProgressView_progress, 0);
maxProgress = typedArray.getFloat(R.styleable.BezierProgressView_maxProgress, 100);
radius = typedArray.getInt(R.styleable.BezierProgressView_radius, 100);
circleColor = typedArray.getColor(R.styleable.BezierProgressView_circleColor, Color.BLACK);
waveColor = typedArray.getColor(R.styleable.BezierProgressView_waveColor, Color.BLUE);
textColor = typedArray.getColor(R.styleable.BezierProgressView_textColor, Color.BLACK);
textSize = typedArray.getDimensionPixelSize(R.styleable.BezierProgressView_textSize, dpToPx(getContext(), 16));
roundPaint.setColor(circleColor);
roundPaint.setStyle(Paint.Style.FILL);
wavePaint.setColor(waveColor);
wavePaint.setDither(true);
textPaint.setColor(textColor);
textPaint.setTextSize(textSize);
}
@Override
protected void onDraw(Canvas canvas) {
drawRound(canvas);
if (progress > 0) {
drawWave(canvas);
offset -= speed;
if (offset <= -width) {
offset = 0;
}
invalidate();
}
drawText(canvas);
}
//画圆
private void drawRound(Canvas canvas) {
if (roundBitmap != null) {//画缓冲BlurMaskFilter的圆
canvas.drawBitmap(roundBitmap, 0, 0, wavePaint);
return;
}
width = height = (int) (radius * 2 blurRadius * 4);
centerX = width / 2.0f;
centerY = height / 2.0f;
roundBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
xfermodeDstBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
XfermodeCanvas = new Canvas(xfermodeDstBitmap);
//画BlurMaskFilter的圆
BlurMaskFilter maskFilter = new BlurMaskFilter(blurRadius, BlurMaskFilter.Blur.OUTER);
roundPaint.setMaskFilter(maskFilter);
Canvas roundCanvas = new Canvas(roundBitmap);
roundCanvas.drawCircle(centerX, centerY, radius, roundPaint);
//画Xfermode的圆
wavePaint.setColor(Color.WHITE);
XfermodeCanvas.drawCircle(centerX, centerY, radius, wavePaint);
canvas.drawBitmap(roundBitmap, 0, 0, wavePaint);
//初始化shader
linearGradient = new LinearGradient(0, height, 0, -height, new int[]{waveColor, Color.TRANSPARENT}, null, Shader.TileMode.CLAMP);
}
private void drawWave(Canvas canvas) {
float ratio = 1 - progress / maxProgress;
//水波纹Y坐标
float waveY = height * ratio;
wavePath.reset();
wavePath.moveTo(0, waveY);
wavePath.quadTo(centerX / 2, waveY 20, centerX, waveY);
wavePath.quadTo(centerX (width - centerX) / 2, waveY - 20, width, waveY);
wavePath.quadTo(centerX * 2 (width - centerX) / 2, waveY 20, centerX * 3, waveY);
wavePath.quadTo(centerX * 3 (width - centerX) / 2, waveY - 20, centerX * 4, waveY);
//往下画，形成矩形
wavePath.lineTo(centerX * 4, height);
wavePath.lineTo(0, height);
wavePath.lineTo(0, waveY);
int layerCount = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, ALL_SAVE_FLAG);
wavePaint.setColor(waveColor);
canvas.drawBitmap(xfermodeDstBitmap, 0, 0, wavePaint);
wavePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
wavePath.offset(offset, 0);
wavePaint.setShader(linearGradient);
canvas.drawPath(wavePath, wavePaint);
wavePaint.setShader(null);
wavePaint.setXfermode(null);
canvas.restoreToCount(layerCount);
}
private void drawText(Canvas canvas) {
Paint.FontMetrics m = new Paint.FontMetrics();
textPaint.getFontMetrics(m);
int baseLine = (int) (height / 2 - (m.top m.bottom) / 2);
String text = (int) (progress / maxProgress * 100) "%";
canvas.drawText(text, width / 2f - textPaint.measureText(text) / 2, baseLine, textPaint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
setProgress(progress 10);
}
return super.onTouchEvent(event);
}
public void setProgress(float progress) {
this.progress = progress > maxProgress ? maxProgress : progress;
postInvalidate();
}
public int dpToPx(Context context, int size) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (size * scale 0.5f);
}
}
去掉Xfermode的实际效果是这样的
项目地址：https://gitee.com/aruba/CanvasApplication.git
