效果展示：

原理解析：

首先构建一个圆形路径（中心点为控件中心），然后利用canvas.clipPath方法将画布裁剪为圆形。

利用贝赛尔曲线构造一条如上图所示的波浪线，波浪线分为三段（一起一伏为一段，每段长度为圆的直径长度），波浪线左端点到圆左端点为一段，圆中为一段，剩下的为一段。然后将波浪线的两端点与控件底部两点相连形成闭合路径。

然后将起始点A不断向右移动即可实现波浪的动画效果，而绿色部分的高度（进度）则是由相同的原理实现的，这里就不多做描述了。

代码展示：

public class WaveView extends View {private Paint mPaintWavw;//波浪画笔private Paint mPaintProgress;//进度画笔private float mItemWaveLength;//波浪长度private float mRadius;//圆的半径private float mWaveHeight = 20;//波浪的高度private float mProgressTextSize = 130 ;//进度文字的大小private Path mPathWave;//波浪路径（不透明）private Path mPathWaveAlpha;//波浪路径（半透明）private Path mPathCircle;//圆形球路径private float mWave=0;//波浪偏移量（实现波浪效果的关键）private float mProgress = 0;//进度private Paint.FontMetricsInt mFontMetricsInt;private ObjectAnimator mWaveobjectAnimator;public WaveView(Context context) {this(context,null);}public WaveView(Context context, @Nullable AttributeSet attrs) {this(context, attrs,0);}public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init() {setLayerType(LAYER_TYPE_SOFTWARE,null);mPaintWavw = new Paint(Paint.ANTI_ALIAS_FLAG);mPaintWavw.setColor(Color.parseColor("#33F92B"));mPaintWavw.setStyle(Paint.Style.FILL);mPaintProgress = new Paint(Paint.ANTI_ALIAS_FLAG);mPaintProgress.setStrokeWidth(10);mPaintProgress.setStrokeCap(Paint.Cap.ROUND);//设置笔帽为圆形mPaintProgress.setStrokeJoin(Paint.Join.ROUND);//设置拐角为圆形mPaintProgress.setColor(Color.WHITE);//将进度颜色设置为白色mPaintProgress.setTextAlign(Paint.Align.CENTER);mPathWave = new Path();mPathWaveAlpha = new Path();mPathCircle = new Path();}/*** 修改高度* @param widthMeasureSpec* @param heightMeasureSpec*/@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {setMeasuredDimension(measureWidth(widthMeasureSpec),measuredHeight(heightMeasureSpec));}/*** 测量宽* @param widthMeasureSpec*/private int measureWidth(int widthMeasureSpec) {int result ;int specMode = MeasureSpec.getMode(widthMeasureSpec);int specSize = MeasureSpec.getSize(widthMeasureSpec);if (specMode == MeasureSpec.EXACTLY){result = specSize;}else {result = 200;if (specMode == MeasureSpec.AT_MOST){result = Math.min(result,specSize);}}return result;}/*** 测量高* @param heightMeasureSpec*/private int measuredHeight(int heightMeasureSpec) {int result ;int specMode = MeasureSpec.getMode(heightMeasureSpec);int specSize = MeasureSpec.getSize(heightMeasureSpec);if (specMode == MeasureSpec.EXACTLY){result = specSize;}else{result = 200;if(specMode == MeasureSpec.AT_MOST){result = Math.min(result,specSize);}}return  result;}/*** 当控件大小发生改变的时候对一些数值进行调整以适应控件大小* @param w* @param h* @param oldw* @param oldh*/@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);mRadius = (float) (Math.min(w, h)*0.9/2);mItemWaveLength = mRadius *2;//一段波浪的长度mPathCircle.addCircle(w/2,h/2,mRadius, Path.Direction.CW);mProgressTextSize = mRadius*0.7f;//当控件大小发生变化时，动态修改文字大小mPaintProgress.setTextSize(mProgressTextSize);mFontMetricsInt = mPaintProgress.getFontMetricsInt();mWaveHeight = mRadius/8;//当控件大小发生变化时，动态修改波浪高度invalidate();startWaveAnim();}private void startWaveAnim() {mWaveobjectAnimator = ObjectAnimator.ofFloat(this, "wave", 0, mItemWaveLength).setDuration(4000);mWaveobjectAnimator.setRepeatCount(ValueAnimator.INFINITE);mWaveobjectAnimator.setInterpolator(new LinearInterpolator());mWaveobjectAnimator.start();}/*** 设置波浪偏移量（波浪的动画效果核心是靠这个实现的）* @param wave*/public void setWave(float wave){mWave = wave;invalidate();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.save();canvas.clipPath(mPathCircle);//将画布裁剪为圆形canvas.drawColor(Color.parseColor("#3233F92B"));mPathWave.reset();mPathWaveAlpha.reset();//将波浪路径起始点移至圆形球的左侧一段波浪长度（即上下起伏为一段）的位置处mPathWave.moveTo(getWidth()/2-mRadius-mItemWaveLength+mWave,getHeight()/2+mRadius+mWaveHeight-mProgress*(mRadius*2+mWaveHeight*2));mPathWaveAlpha.moveTo(getWidth()/2-mRadius-mItemWaveLength+mWave+mItemWaveLength/8,getHeight()/2+mRadius+mWaveHeight-mProgress*(mRadius*2+mWaveHeight*2));float half = mItemWaveLength / 4;for(float x= -mItemWaveLength;x<getWidth()+mItemWaveLength;x+=mItemWaveLength){mPathWave.rQuadTo(half/2,-mWaveHeight,half,0);//贝赛尔曲线实现波浪mPathWave.rQuadTo(half/2,mWaveHeight,half,0);mPathWaveAlpha.rQuadTo(half/2,-mWaveHeight,half,0);//贝赛尔曲线实现波浪mPathWaveAlpha.rQuadTo(half/2,mWaveHeight,half,0);}mPathWave.lineTo(getWidth(),getHeight());mPathWave.lineTo(0,getHeight());mPathWave.close();//制造闭合路径mPathWaveAlpha.lineTo(getWidth(),getHeight());mPathWaveAlpha.lineTo(0,getHeight());mPathWaveAlpha.close();//制造闭合路径mPaintWavw.setColor(Color.parseColor("#7a33F92B"));//设置后面的波浪为半透明canvas.drawPath(mPathWaveAlpha, mPaintWavw);mPaintWavw.setColor(Color.parseColor("#33F92B"));//设置前面的波浪为不透明canvas.drawPath(mPathWave, mPaintWavw);canvas.drawText((int)(mProgress*100)+"%",getWidth()/2,getHeight()/2+((mFontMetricsInt.bottom-mFontMetricsInt.top)/2-mFontMetricsInt.bottom),mPaintProgress);canvas.restore();}/*** 设置进度（不带动画）* @param progress*/public void setProgress(float progress){mProgress = progress;invalidate();}/*** 设置进度带动画* @param progress*/public void setProgressWithAnim(float progress){ObjectAnimator.ofFloat(this, "progress", 0, progress).setDuration(5000).start();}@Overrideprotected void onDetachedFromWindow() {super.onDetachedFromWindow();if(mWaveobjectAnimator!=null){//当控件移除时取消动画mWaveobjectAnimator.cancel();}}

使用方法：

这里只有两个方法：

setProgress(float progress)：设置进度（不加上升动画）
setProgressWithAnim(float progress)：设置进度（加上升动画）

项目源码：

https: //github.com/myml666/WaveDemo