WaveProgressBar -- 波浪进度条

前言

很久之前，在简书上看到一个圆形双曲线波浪的进度条的文章，感觉很不错，结果，看一下代码，却是IOS的，嗯，其实github上也有很多android的双曲线动画，不过，我看了几个控件的源码（这个有空在分析），看不懂~原谅我把数学扔给体育老师了，里面涉及到反余弦函数，还有Matrix的使用，好吧，这个我是真的不是很懂，然后，决定自己写一个，效果：

在文章的结尾，我会贴上代码地址。事实上，我写这篇文章的主要目的，更多是希望能描述清楚这个控件的使用，以及这个控件如何画出来。有过真实开发的同学都知道，需求千奇百怪，你永远不会知道产品下一个改动是什么。

准备

事实上，我并不准备重复我以前写过的东西，这里我只会简述一下几个API的使用：

path.quadTo()  参数为绝对位置
path.rQuadTo() 参数为相对前一个点的相对位置

上面这两个API如果不是很明白的话，可以看下我以前的一篇文章 Android 双曲线波浪动画(第一发)，这篇文章里面你可以看到我很详细的讲述了这两个API的不同，当然，你还可以欣赏到我灵魂画师般的画技^-^。

path.arcTo  添加一个圆弧到path，如果圆弧的起点和上次最后一个坐标点不相同，就连接两个点

上面的解释感觉好抽象，举个实际简单的列子：

假设这是一个左上角是原点的矩形，x轴边长 = 20， y轴边长 = 10，那么如图，我想要填充如图的形状，那么问题主要就是怎么连接 B – C。
伪代码：

path.moveTo(0, 0);  从 0，0 出发
path.lineTo(5, 0);  A 连接到 C
Rect rect = new Rect(0, 0, 20, 10); 整个矩形的Rect对象
path.arcTo(rect, 180, 90, true); 180 代表着开始的角度，90代表着需要绘制的角度， true的意思就是：将最后一个点移动到圆弧起点，即不连接最后一个点与圆弧起点，你可以理解为只绘制路径，不填充圆弧，填充圆弧的话，就会变成三角的形状了

至此，如果你确实理解了以上的方法，那么接下来就是一些细节了，如果还是不太明白，那么接下来的篇幅，希望能帮助你理解。

代码思路

秉承着本人的习惯，代码就是思路，并且，最清楚的方法莫过于 onDraw。

onDraw :

    @Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(cavans_bg);if (progress > 0 && progress < max)drawWave(canvas);else if (progress == max)canvas.drawColor(front_wave_color);drawText(canvas);if (shape.equals(CIRCLE))drawArcs(canvas);}

整个绘制，我分为了三部分： drawWave ( 绘制动态波浪 ) , drawText（绘制文字）, drawArcs（绘制四角的伪三角形）。

先来看看简单的部分，drawText 和 drawArcs

drawText：很简单的代码，默认情况下绘制在控件中心

// 默认情况下的值，side_lenght 是正方形的边长。if (text_margin_top == 0)text_margin_top = (int) (side_length / 2 + (fontMetrics.descent - fontMetrics.ascent) / 2);protected void drawText(Canvas canvas) {if (text_follow_progress)text = progress + PERCENT_CHAR;int textLength = (int) textPaint.measureText(text);int i = (side_length - textLength) / 2;canvas.drawText(text, i, text_margin_top, textPaint);}

drawArcs：其实就是以左上，右上，右下，左下的顺序绘制了四个伪三角形。

    protected void drawArcs(Canvas canvas) {pathPaint.setColor(arcColor);path.reset();path.moveTo(half_side_length, 0);path.arcTo(rectf, 180, 90, true);path.lineTo(0, 0);path.close();canvas.drawPath(path, pathPaint);path.reset();path.moveTo(half_side_length, 0);path.arcTo(rectf, 270, 90, true);path.lineTo(side_length, 0);path.close();canvas.drawPath(path, pathPaint);path.reset();path.moveTo(side_length, 0);path.arcTo(rectf, 0, 90, true);path.lineTo(side_length, side_length);path.close();canvas.drawPath(path, pathPaint);path.reset();path.moveTo(half_side_length, side_length);path.arcTo(rectf, 90, 90, true);path.lineTo(0, side_length);path.close();canvas.drawPath(path, pathPaint);}

在看完简单的代码后，就可以来看看主要的代码 drawWave，对了，在看 drawWave 之前，需要看下一些参数的含义，以及参数的计算，我将这些步骤大都放在 onSizeChanged 方法中，也就是当 onMeasure 方法完全调用完成，完成了对 View 宽高的测量之后，再来计算我需要的值。

onSizeChanged

    @Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);
//        Log.d(TAG, "w = " + w + " : h = " + h);// 整个控件的矩形区间对象rectf = new RectF(0, 0, side_length, side_length);// side_length 其实就是矩形的边长，因为这个矩形是个正方形// 下面三行代码分别计算了 二分之一、四分之一、以及 八分之一 的边长值half_side_length = side_length / 2;quarter_side_length = half_side_length / 2;eighth_side_length = quarter_side_length / 2;//计算每一个进度的高度percent_height = side_length / max;// 默认情况下，波浪的振幅if (dwave == -1)dwave = side_length / 40 * 3;if (text_margin_top == 0)text_margin_top = (int) (side_length / 2 + (fontMetrics.descent - fontMetrics.ascent) / 2);initPaints();}

drawWave：注释会详细的写在代码里

 protected void drawWave(Canvas canvas) {//计算当前进度的高度int wave_height = side_length - progress * percent_height;// baseX 是波浪起始点的 X 轴坐标，其中 dx 是用来控制变化起始点的位置的// 之后会贴出 dx 的变化代码int baseX = -side_length + dx;if (baseX > 0)baseX = 0;//先绘制底部的波浪path.reset();pathPaint.setColor(behind_wave_color);path.moveTo(baseX, wave_height);for (int i = 0; i < 2; i++) {path.rQuadTo(quarter_side_length, -dwave, half_side_length, 0);path.rQuadTo(quarter_side_length, dwave, half_side_length, 0);}path.lineTo(side_length, side_length);path.lineTo(0, side_length);path.close();canvas.drawPath(path, pathPaint);//再绘制顶部的波浪// 注意：这里我默认写死了起始点的 X 坐标比 底部波浪的起始坐标 向左偏离 八分之一的宽度，这样两层波浪的效果才会逼真一点，同步的话会感觉很怪异path.reset();pathPaint.setColor(front_wave_color);path.moveTo(baseX - eighth_side_length, wave_height);for (int i = 0; i < 3; i++) {path.rQuadTo(quarter_side_length, dwave, half_side_length, 0);path.rQuadTo(quarter_side_length, -dwave, half_side_length, 0);}path.lineTo(side_length, side_length);path.lineTo(0, side_length);path.close();canvas.drawPath(path, pathPaint);}

dx 的变化代码：一个简单的属性动画

  public void startWaveAnimation() {animation = true;int value = 0;if (side_length == 0)value = Math.min(width, height);else if (height == width && height == 0)value = side_length;elsevalue = Math.min(side_length, Math.min(width, height));valueAnimator = ValueAnimator.ofInt(0, value);valueAnimator.setDuration(wave_duration);valueAnimator.setRepeatCount(ValueAnimator.INFINITE);valueAnimator.setInterpolator(new LinearInterpolator());valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {dx = (int) valueAnimator.getAnimatedValue();if (animation)postInvalidate();}});valueAnimator.start();}

总结

到这里其实整个控件就没什么好说的了，其他的只是一些零碎的细节，以及bug 的修复代码。其实本周计划是出两篇博客的，一篇是自己写的控件，就是本篇，另一篇是对 github 上开源控件的源码解读，然而，就像开篇所述，反三角函数和 Matrix 把我拦住了，不过，一定会写的，等我把数学捡起来，给自己定个小目标：下星期完成。

源码地址