水波纹进度条（自定义View——进阶篇1）

自定义控件——ProgressCircleView（水波纹进度条）

最近在很多群都有提到水波纹进度条，看起来蛮唬人的，但是我们要相信毛爷爷的话，一切看起来唬人的都是纸老唬，一言不合，还是先贴效果图：

这个效果该怎么实现呢，今天还是讲思路，思路从图开始，接下来的这张图是我呕心沥血之作，帮助大家分分钟找到解决方案，所以再丑你们也不要嫌弃，上图：

看到这里，我也感觉画风不对，不过重要的还是思想，以后会慢慢改进：

看到没，就这么简单，水波纹部分不正是 圆 和 贝塞尔曲线 + 左右下边距 形成图案的交集部分么，搜噶斯内，到这里所有的问题都已不是问题，当然可能很多人可能只听过贝塞尔曲线，不过不了解到底是个啥玩意，感觉蛮叼的样子，我来给大家稍稍介绍下：

这里是二阶贝塞尔曲线，多阶就不介绍了，免得跑题了。

工具类，二阶贝塞尔曲线绘制：path.rQuadTo(dx1, dy1, dx2, dy2);P0为起点坐标，方法中的参数对应P1和P2的坐标点。

方法介绍了，该是贴代码的时候了，为了方便大家理解，我这里分别从左至右、从右至左绘制了贝塞尔曲线，不过视觉效果上似乎没差别：

/**     * @param direction 0从左至右，1从右至左(绘制)     */    private void drawQuad(int direction) {        //绘制进度波纹        path.reset();        //计算画笔所在的Y坐标值，直径 - 进度移动距离        float py = (1 - (float) currentProgress / maxProgress) * 2 * radius;        switch (direction) {            case 0:                //x轴不变，向Y轴方向移动画笔（这里为向上）                path.moveTo(0, py);                //默认水波纹半径                float pRadius = 2f * radius / progressDensity;//progressDensity为水波纹的密度                //水波纹当前半径                float cRadius = (1 - (float) currentProgress / maxProgress) * pRadius;                for (int i = 0; i < progressDensity; i++) {                    //这里是在一条直线上绘制的是上下循环的贝塞尔曲线                    //下曲线，这里可以去掉,但不去掉会更美观                    path.rQuadTo(pRadius, cRadius, 2 * pRadius, 0);//绘制贝塞尔曲线，每次绘制相对上一条的位置开始                    //上曲线                    path.rQuadTo(pRadius, -cRadius, 2 * pRadius, 0);                }                path.lineTo(width, py);                path.lineTo(width, heigth);                path.lineTo(0, heigth);                break;            case 1:                //x轴不变，向Y轴方向移动画笔（这里为向上）                path.moveTo(width, py);                //默认水波纹半径                float pRadius1 = 2f * radius / progressDensity;//progressDensity为水波纹的密度                //水波纹当前半径                float cRadius1 = (1 - (float) currentProgress / maxProgress) * pRadius1;                for (int i = 0; i < progressDensity; i++) {                    //这里是在一条直线上绘制的是上下循环的贝塞尔曲线                    //下曲线，这里可以去掉,但不去掉会更美观                    path.rQuadTo(-pRadius1, cRadius1, -2 * pRadius1, 0);//绘制贝塞尔曲线，每次绘制相对上一条的位置开始                    //上曲线                    path.rQuadTo(-pRadius1, -cRadius1, -2 * pRadius1, 0);                }                path.lineTo(0, heigth);                path.lineTo(width, heigth);                path.lineTo(width, py);                break;            default:                break;        }        path.close();        bitmapCanvas.drawPath(path, progressPaint);    }

说到了，就该结束了，如果你只想当搬运工，我也很善解人意的提供源码：

ProgressCircleView