通过自定义观点实现了一个水滴滴落到水波面,溅起水花并且水波流动上涨的进度条控件。之前看到过好多水波流动的进度条,感觉欠缺些东西,就想到了水滴到水平面,溅起水花然后水流动上涨的进度条效果,于是自己动手写了出来。效果如下,视频录制有些卡顿,实际会流畅很多。
<强>一。用法
1。布局文件中添加WaveProgressView, circleColor属性为圆环颜色,水彩属性为水波水滴的颜色,属进展性为初始的进度
& lt; com.yhongm.wave_progress_view.WaveProgressView
android: id=癅 + id/wave_progress_view”
android: layout_width=" 300 dp”
android: layout_height=" 300 dp”
android: layout_centerInParent=" true "
应用:circleColor=" # e38854”
应用:进步=" 0 "
应用:水彩=" # 5488年e3/比;
之前
2. waveprogressview.setprogress()方法设置当前的进度
<强>二。本文实现的逻辑
1,画水波流动,通过三阶贝塞尔曲线画波形,通过不断的改变waveOffsetX和waveOffsetY的值实现流动的效果
/* *
*生成水波流动
*
* @param开始水波形开始的位置
* @param波长水波的长度
* @param waveOffsetX水波水平的偏移
* @param waveOffsetY水波垂直方向的偏移
* @return
*/私有路径getWavePath(波长开始浮动,int, int waveOffsetX int waveOffsetY) {
路径mPath=new路径();
mPath.reset ();
mPath。函数(波长*开始,mCurrentHeight);
for (int i=0;我& lt;mWaveCount;我+ +){
mPath。quadTo(波长*(开始+ 0.25 f) +(我*波长)+ waveOffsetX mCurrentHeight + waveOffsetY(波长*(开始+ 0.5 f) +(我*波长)+ waveOffsetX), mCurrentHeight);
mPath。quadTo(波长*(开始+ 0.75 f) +(我*波长)+ waveOffsetX mCurrentHeight——waveOffsetY(波长*(开始+ 1 f) +(我*波长)+ waveOffsetX), mCurrentHeight);
}
mPath。画线(mWidth mHeight);
mPath。画线(0,mHeight);
mPath.close ();
返回mPath;
}
2。画水滴的形状,水滴的形状是通过一个三角形和一个弧形组成的
/* *
*水滴的路径
*
* @param x水滴坐标x
* @param y水滴坐标y
* @param大小水滴尺寸
* @return
*/私人道路滴水(int x浮动,浮动y,大小){
路径mDropPath=new路径();
mDropPath。函数(x -大小,y);
mDropPath。画线(x(浮动)(y -大小* 2.5));
mDropPath。画线(x +大小,y);
mDropPath。addArc (x -大小,y -大小,x +大小、y +大小,0,180);
返回mDropPath;
}
之前
3。画水滴滴落到水波的效果,就是沿Y轴轴不断的移动水滴
/* *
*根据位置画水滴
*
* @param x
* @param y
* @param帆布
*/私人空间drawDropByLocation(帆布画布,int x, int y) {
路径mDropPath=滴水(x, y, 30);
如果(y==(mCurrentHeight + 50)) {
mDropPaint.setAlpha (0);
}
画布。drawPath (mDropPath mDropPaint);
}
之前
4。画最外两侧溅落的水滴,通过三阶贝塞尔曲线模拟左右两侧水滴溅落的路径,随机生成的水滴溅落路径都在这左右两侧内
/* *
*画两侧水滴飞溅的效果,并且随机生成水滴
*
* @param帆布
* @param x
* @param y当前高度
*/私人同步空白drawDropSplash(帆布画布,int x, int y) {
PathMeasure mLeftPathMeasure=getOnBothSidesOfPathMeasure (x, y,真的);
PathMeasure mRightPathMeasure=getOnBothSidesOfPathMeasure (x, y,假);
浮动[]mLeftPos=new浮动[2];
浮动[]mRightPos=new浮动[2];
浮动[]mLeftTan=new浮动[2];
浮动[]mRightTan=new浮动[2];
for (int i=0;我& lt;200;我+ +){
浮动百分比=我/200 f;
mLeftPathMeasure.getPosTan (mLeftPathMeasure.getLength() *百分比、mLeftPos mLeftTan);
mRightPathMeasure.getPosTan (mRightPathMeasure.getLength() *百分比、mRightPos mRightTan);
mLeftHashMapPath.put (Math.round (mLeftPos [1]), mLeftPos [0]);
mRightHashMapPath.put (Math.round (mRightPos [1]), mRightPos [0]);
}
如果(mRandomHashMap.isEmpty (),,mRandomHashMap.size ()==0) {
pushRandomDrag (y);
}
drawRandomDrag(画布,x, y, mLeftHashMapPath mRightHashMapPath);
drawOnBothSidesOfWaterDrop(画布,mLeftPathMeasure);
drawOnBothSidesOfWaterDrop(画布,mRightPathMeasure);
}
