Android-自定义水波纹刻度进度条


效果图:

Android-自定义水波纹刻度进度条_第1张图片


目录

一、使用canvas的旋转
二、画布Canvas.clipPath()方法。
三、实现思路
1、外层的刻度进度条:
2、里面的水波纹的操作
四、自定义属性并初始化属性
五、绘制外层刻度条
六、根据当前的进度改变水波纹的振幅
七、绘制水波纹及原理【重点】
1、获取到水波中心点Y轴的值
2、创建一个水波圆,并使用画布剪切
(1)为什么贝塞尔曲线控制点的x轴-mStep?:
(2)为什么要判断是否是奇数和偶数?
(3)为什么绘制的贝塞尔曲线会大于mWaveCount?
4、同理可以绘制第二个反向的水波纹
五、为水波纹和进度条添加移动属性动画
六、绘制进度条文字

实现这个动画需要的一些预备知识:
一、使用canvas的旋转
在绘制刻度的时候,会涉及到旋转操作,此处将一个圆分成100分,那么每一份就是3.6f;
canvas.rotate(旋转的角度,旋转中心X,旋转中心Y);
因为是画布的旋转,那么会导致画布整体旋转,所以需要在旋转之前保存之前的位置(使用canvas.save());
然后再旋转完成之后再恢复之前的状态(使用canvas.restore())
二、画布Canvas.clipPath()方法。
因为绘制上面的进度条外层其实是一个矩形框,那么我们可以使用clipPath()方法来剪切,剪切成一个圆,这样就可以显示成动画再圆中;
详细介绍请见:
canvas常用的方法【重点】:
https://www.cnblogs.com/tianzhijiexian/p/4300988.html
三、实现思路
1、外层的刻度进度条:
使用一个循环,当当前的值i小于mPercent的时候就改变画笔的值,设置为进度条的颜色,否则就设置成刻度背景颜色;然后通过旋转分别绘制100条短线段;
2、里面的水波纹的操作
水波纹的操作主要使用的是:贝塞尔二阶曲线;
Android-自定义水波纹刻度进度条_第2张图片
那么如何实现水波了,其实就是不断的从一个方向绘制贝塞尔曲线,然后添加一个进步mStep,当从右向左绘制的时候,不断的改变贝赛尔曲线的控制点的x和Y轴的值和每一个quaTo()的后面结尾的那个店的x轴的值;

四、自定义属性并初始化属性
Android-自定义水波纹刻度进度条_第3张图片

Android-自定义水波纹刻度进度条_第4张图片 Android-自定义水波纹刻度进度条_第5张图片

五、绘制外层刻度条
Android-自定义水波纹刻度进度条_第6张图片

六、根据当前的进度改变水波纹的振幅
为什么要改变振幅,那是因为当进度比较小的时候(比如<20),需要将振幅变小一些使得看着平滑一些,当进度比较大的时候可以稍微变大,当进度过大(比如大于>80),进度有已经在顶部了,那么也需要将振幅变小使得看着平滑一些;
Android-自定义水波纹刻度进度条_第7张图片
里面的参数可以在适当的修改。
七、绘制水波纹及原理【重点】
1、获取到水波中心点Y轴的值
绘制水波纹,根据前面画的图,首先必须知道水波纹中心点的Y轴坐标值;Y轴的坐标值是随着进度变大而变小的;


Y轴的值=水波圆高度*(1-mPercent/100)+刻度的长度+刻度圆和水波圆的间距;
2、创建一个水波圆,并使用画布剪切
之所以要使用画布剪切是为了让绘制的水波纹在圆内显示出来。
canvas常用的方法【重点】:
https://www.cnblogs.com/tianzhijiexian/p/4300988.html

3、绘制贝塞尔曲线:
Android-自定义水波纹刻度进度条_第8张图片

Android-自定义水波纹刻度进度条_第9张图片

(1)为什么贝塞尔曲线控制点的x轴-mStep?:
因为是绘制从左到右,那么减去在每一个贝塞尔曲线的控制点的x-mStep,就达到了,水波纹从右向左移动的目的;
(2)为什么要判断是否是奇数和偶数?
因为在绘制贝塞尔曲线的时候,当当前绘制的曲线(quadTo())的时候 为奇数 的时候,驼峰向上那么Y轴就应该 减去 振幅,当为偶数的时候,驼峰向下那么Y轴应该 加上 振幅。
(3)为什么绘制的贝塞尔曲线会大于mWaveCount?
此处本人绘制的是2倍的mWaveCount;
首先来看一下:绘制成mWaveCount数量的贝塞尔曲线会是什么样子?

Android-自定义水波纹刻度进度条_第10张图片
此处我将剪切圆也注释掉了,这样更加清晰的看的出来。
水波纹产生的情况是右边一直往左边推动或者说是偏移,而左边也产偏移,从而产生波纹;
当绘制成mWaveCount数量的贝塞尔曲线的时候,右边部分产生了空缺从而在视觉上有停顿的效果;那么如果我们把绘制的位置往右多绘制几个,那么在不可见的区域即使有停顿也不知道了。

现在把绘制成2倍的mWaveCount数量:
Android-自定义水波纹刻度进度条_第11张图片
可以看得出来,早可见的区域就是一个无限的动画效果。具体的停顿就在不可见的区域了。
4、同理可以绘制第二个反向的水波纹
在绘制反向的水波纹的时候需要注意的是:
1、因为往右移动(那么相当于x轴的值一直在加);
2、关键是,因为现在需要过渡在左边绘制,以填补左边的空白

Android-自定义水波纹刻度进度条_第12张图片

五、为水波纹和进度条添加移动属性动画

Android-自定义水波纹刻度进度条_第13张图片
Android-自定义水波纹刻度进度条_第14张图片

六、绘制进度条文字

Android-自定义水波纹刻度进度条_第15张图片 Android-自定义水波纹刻度进度条_第16张图片

项目地址:
https://github.com/MrGaoGang/SelfDefineViews/tree/master/app/src/main/java/mrgao/com/mrgaoviews/views

你可能感兴趣的:(Android自定义View,android,进度条,水波纹进度条,Android,Android自定义View,水波纹进度条,刻度进度条)