通过自定义view实现了一个水滴滴落到水波面，溅起水花并且水波流动上涨的进度条控件。之前看到过好多水波流动的进度条，感觉欠缺些东西，就想到了水滴到水平面，溅起水花然后水流动上涨的进度条效果，于是自己动手写了出来。效果如下，视频录制有些卡顿，实际会流畅很多。
一.用法
1.布局文件中添加WaveProgressView，circleColor属性为圆环颜色，waterColor属性为水波水滴的颜色，progress属性为初始的进度
|
1
2
3
4
5
6
7
8
|
<com.yhongm.wave_progress_view.WaveProgressView android:id="@+id/wave_progress_view" android:layout_width="300dp" android:layout_height="300dp" android:layout_centerInParent="true" app:circleColor="#e38854" app:progress="0" app:waterColor="#5488e3" /> |
2.WaveProgressView.setProgress()方法设置当前的进度
二.本文实现的逻辑
1,画水波流动，通过三阶贝塞尔曲线画波形，通过不断的改变waveOffsetX和waveOffsetY的值实现流动的效果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
/** * 生成水波流动 * * @param begin 水波形开始的位置 * @param waveLength 水波的长度 * @param waveOffsetX 水波水平的偏移 * @param waveOffsetY 水波垂直方向的偏移 * @return */ private Path getWavePath(float begin, int waveLength, int waveOffsetX, int waveOffsetY) { Path mPath = new Path(); mPath.reset(); mPath.moveTo(waveLength * begin, mCurrentHeight); for (int i = 0; i < mWaveCount; i++) { mPath.quadTo(waveLength * (begin + 0.25f) + (i * waveLength) + waveOffsetX, mCurrentHeight + waveOffsetY, (waveLength * (begin + 0.5f) + (i * waveLength) + waveOffsetX), mCurrentHeight); mPath.quadTo(waveLength * (begin + 0.75f) + (i * waveLength) + waveOffsetX, mCurrentHeight - waveOffsetY, (waveLength * (begin + 1f) + (i * waveLength) + waveOffsetX), mCurrentHeight); } mPath.lineTo(mWidth, mHeight); mPath.lineTo(0, mHeight); mPath.close(); return mPath; } |
2.画水滴的形状，水滴的形状是通过一个三角形和一个弧形组成的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/** * 水滴的Path * * @param x 水滴坐标x * @param y 水滴坐标y * @param size 水滴尺寸 * @return */ private Path waterDrop(float x, float y, int size) { Path mDropPath = new Path(); mDropPath.moveTo(x - size, y); mDropPath.lineTo(x, (float) (y - size * 2.5)); mDropPath.lineTo(x + size, y); mDropPath.addArc(x - size, y - size, x + size, y + size, 0, 180); return mDropPath; } |
3.画水滴滴落到水波的效果，就是沿轴Y轴不断的移动水滴
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/** * 根据位置画水滴 * * @param x * @param y * @param canvas */ private void drawDropByLocation(Canvas canvas, int x, int y) { Path mDropPath = waterDrop(x, y, 30); if (y == (mCurrentHeight + 50)) { mDropPaint.setAlpha(0); } canvas.drawPath(mDropPath, mDropPaint); } |
4.画最外两侧溅落的水滴，通过三阶贝塞尔曲线模拟左右两侧水滴溅落的路径，随机生成的水滴溅落路径都在这左右两侧内
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
/** * 画两侧水滴飞溅的效果，并且随机生成水滴 * * @param canvas * @param x * @param y 当前高度 */ private synchronized void drawDropSplash(Canvas canvas, int x, int y) { PathMeasure mLeftPathMeasure = getOnBothSidesOfPathMeasure(x, y, true); PathMeasure mRightPathMeasure = getOnBothSidesOfPathMeasure(x, y, false); float[] mLeftPos = new float[2]; float[] mRightPos = new float[2]; float[] mLeftTan = new float[2]; float[] mRightTan = new float[2]; for (int i = 0; i < 200; i++) { float percent = i / 200f; mLeftPathMeasure.getPosTan(mLeftPathMeasure.getLength() * percent, mLeftPos, mLeftTan); mRightPathMeasure.getPosTan(mRightPathMeasure.getLength() * percent, mRightPos, mRightTan); mLeftHashMapPath.put(Math.round(mLeftPos[1]), mLeftPos[0]); mRightHashMapPath.put(Math.round(mRightPos[1]), mRightPos[0]); } if (mRandomHashMap.isEmpty() && mRandomHashMap.size() == 0) { pushRandomDrag(y); } drawRandomDrag(canvas, x, y, mLeftHashMapPath, mRightHashMapPath); drawOnBothSidesOfWaterDrop(canvas, mLeftPathMeasure); drawOnBothSidesOfWaterDrop(canvas, mRightPathMeasure);} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
/** * 产生随机的水滴 * * @param y */ private void pushRandomDrag(int y) { Random r = new Random(); for (int i = 0; i < 20; i++) { int randomY = r.nextInt(y); if (mLeftHashMapPath.containsKey(randomY)) { Float rightValue = mRightHashMapPath.get(randomY); Float leftValue = mLeftHashMapPath.get(randomY); int roundLeftValue = Math.round(leftValue); int roundRightValue = Math.round(rightValue); if (roundRightValue == roundLeftValue) { roundRightValue++; } int roundMinus = Math.round(roundRightValue - roundLeftValue);//左右差值 float randomX = r.nextInt(roundMinus) + mLeftHashMapPath.get(randomY);//左右差值加上最小值,保证随机值在两者之间 mRandomHashMap.put(randomX, randomY); } }} |
5.随机生成的水滴沿着三阶贝塞尔曲线移动，形成溅落的效果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
/** * 画随机生成水滴溅起 * * @param canvas * @param x * @param y * @param size * @param randomY * @param randomX */ private void drawSmartDropOnPath(Canvas canvas, int x, int y, int size, int randomY, float randomX) { Path smartDropPath = new Path(); smartDropPath.moveTo(x, y + 50); if (x < randomX) { smartDropPath.cubicTo(x, y + 50, randomX + 30, randomY - 20, randomX, randomY); } else { smartDropPath.cubicTo(x, y + 50, randomX - 30, randomY - 20, randomX, randomY); } smartDropPath.lineTo(randomX, randomY + 150); PathMeasure pathMeasure = new PathMeasure(); pathMeasure.setPath(smartDropPath, false); float[] pos = new float[2]; float[] tan = new float[2]; pathMeasure.getPosTan(pathMeasure.getLength() * mPercent, pos, tan); Path path = waterDrop(pos[0], pos[1], size); canvas.drawPath(path, mSplashPaint); } |
完整代码详见 点击打开Github本项目 感兴趣的话帮我点个Star
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/yuhongmiao521/article/details/71733838
