HorizontalWaveProgressView.GIF
网上垂直的水波纹进度条很多，但横向的很少，将垂直的水波纹改为水平的还遇到了些麻烦，现在完善后发布出来，希望遇到的人少躺点坑。
思路分析
整体效果可分为三个，绘制圆角背景和圆角矩形，绘制第一条和第二条水波浪，根据自定义进度变化效果。
功能实现
1.绘制圆角背景和圆角矩形边框
圆角矩形边框：
private RectF rectBorder;
if (rectBorder == null) {
rectBorder = new RectF(0.5f * dp1, 0.5f * dp1, waveActualSizeWidth - 0.5f * dp1, waveActualSizeHeight - 0.5f * dp1);
}
canvas.drawRoundRect(rectBorder, dp27, dp27, borderPaint);
我们创建一个新的画布，然后在画布里画上圆角矩形背景和第一条和第二条水波浪：
//这里用到了缓存 根据参数创建新位图
if (circleBitmap == null) {
circleBitmap = Bitmap.createBitmap(waveActualSizeWidth, waveActualSizeHeight, Bitmap.Config.ARGB_8888);
}
//以该bitmap为底创建一块画布
if (bitmapCanvas == null) {
bitmapCanvas = new Canvas(circleBitmap);
}
// 圆角矩形背景，为了能让波浪填充完整个圆形背景
if (rectBg == null) {
rectBg = new RectF(0, 0, waveActualSizeWidth, waveActualSizeHeight);
}
bitmapCanvas.drawRoundRect(rectBg, dp27, dp27, backgroundPaint);
//裁剪图片
canvas.drawBitmap(circleBitmap, 0, 0, null);
2.通过贝塞尔曲线实现双水波
1）实现第一条水波
/**
* 绘制波浪线
*/
private Path canvasWavePath() {
//要先清掉路线
wavePath.reset();
//起始点移至(0,0) p0 -p1 的高度随着进度的变化而变化
wavePath.moveTo((currentPercent) * waveActualSizeWidth, -moveDistance);
//最多能绘制多少个波浪
//其实也可以用 i < getWidth() ;i+=waveLength来判断 这个没那么完美
//绘制p0 - p1 绘制波浪线 这里有一段是超出View的，在View右边距的右边 所以是* 2
for (int i = 0; i < waveNumber * 2; i++) {
wavePath.rQuadTo(waveHeight, waveLength / 2, 0, waveLength);
wavePath.rQuadTo(-waveHeight, waveLength / 2, 0, waveLength);
}
//连接p1 - p2
wavePath.lineTo(0, waveActualSizeHeight);
//连接p2 - p0
wavePath.lineTo(0, 0);
//封闭起来填充
wavePath.close();
return wavePath;
}
moveDistance为水波垂直方向移动的距离。
waveLength为水波长度，一个上弧加一个下弧为一个波长。
path的起始点为(0,0)可根据进度动态改变，然后循环画曲线，长度是有几个波浪就是多长，然后连接到view高度的位置，最后到(0，0)，形成一个封闭的区域，这样就实现了一个填充的水波效果。
2）绘制第二条水波，第二条水波和第一条类似，只是起始点变了：
/**
* 绘制第二层波浪
*/
private Path canvasSecondPath() {
secondWavePath.reset();
//初始点移动到下方
secondWavePath.moveTo((currentPercent) * waveActualSizeWidth, waveActualSizeHeight + moveDistance);
for (int i = 0; i < waveNumber * 2; i++) {
secondWavePath.rQuadTo(waveHeight, -waveLength / 2, 0, -waveLength);
secondWavePath.rQuadTo(-waveHeight, -waveLength / 2, 0, -waveLength);
}
secondWavePath.lineTo(0, 0);
secondWavePath.lineTo(0, waveActualSizeHeight);
secondWavePath.close();
return secondWavePath;
}
3.设置动画使进度和水波纹变化
/**
* 设置进度
*
* @param currentProgress 进度
* @param duration 达到进度需要的时间
*/
public void setProgress(int currentProgress, long duration, AnimatorListenerAdapter listenerAdapter) {
float percent = currentProgress * 1f / maxProgress;
this.currentProgress = currentProgress;
//从0开始变化
currentPercent = 0;
moveDistance = 0;
mProgressAnimator = ValueAnimator.ofFloat(0, percent);
//设置动画时间
mProgressAnimator.setDuration(duration);
//让动画匀速播放，避免出现波浪平移停顿的现象
mProgressAnimator.setInterpolator(new LinearInterpolator());
mProgressAnimator.addUpdateListener(listener);
mProgressAnimator.addListener(listenerAdapter);
mProgressAnimator.start();
// 波浪线
startWaveAnimal();
}
/**
* 波浪动画
*/
private void startWaveAnimal() {
//动画实例化
if (waveProgressAnimator == null) {
waveProgressAnimator = new WaveProgressAnimal();
//设置动画时间
waveProgressAnimator.setDuration(2000);
//设置循环播放
waveProgressAnimator.setRepeatCount(Animation.INFINITE);
//让动画匀速播放，避免出现波浪平移停顿的现象
waveProgressAnimator.setInterpolator(new LinearInterpolator());
//当前视图开启动画
this.startAnimation(waveProgressAnimator);
}
}
其中波浪动画是通过改变moveDistance的值改变纵坐标达到，进度主要是通过改变百分比currentPercent改变波浪的横坐标达到。
结语
通过这个项目，主要可以学到贝塞尔曲线，也可以搭配上不同的动画，搞定产品的各种交互效果。对应的文件：HorizontalWaveProgressView.java
