Android

水波纹进度条

Posted by Tfly on 2019-07-10

参考文章

Android自定义View——实现水波纹效果类似剩余流量球

我的思路

水波示意图：

如何绘制水波

水波形状，使用贝塞尔曲线。如上图所示，y轴为控件左边界，在左边界多绘制一个周期。这个周期是水波X方向上的移动范围。

如何让水波动起来

每次进度增加的时候，绘制起始点在X右方向上移动一小段距离，随着进度不断增加，水波不断向前移动。

绘制起始点X坐标计算公式:

当前绘制起始点X坐标=初始绘制起始点X坐标+(X右方向方向上移动距离%波长)

如何让进度平滑过度

一般情况下，进度都是渐进式的，进度的间隔可能比较小，比如从0%到5%，在这个小间隔上，希望进度是平稳过渡，而不是突兀一下到5%。参考文章的例子，就有进度过渡不平滑到问题。

解决方案如下：

假设进度从0%到100%的动时长为duration，那么可以计算出每次进度变化的时长为duration*(progress-oldProgress)/100。累计之前动画时长为delayTime，每次进度的属性动画延迟delayTime。

在属性动画中，由于进度变化范围太小或时间间隔太长，每一帧的进度值可能会重复，重复帧不要绘制，以防止过渡刷新导致动画闪动。

额外说明

1.进度为0%时要防止波峰露出，所以，0%时绘制起始点的Y坐标=控件高度+波峰
2.进度为100%时要防止波谷露出，所以，100%进度时，再增加额外进度

1
2
3
4
5
6
7
//进度到100%时防止波谷露出
if (progress == 100) {
    //0%防止波峰露出，位置下移一个振幅，100%防止波谷露出，位置上一一个振幅，所以额外移动距离为2*mPeak
    //extraProgress = (int) (2*mPeak / (2*mRadius) * 100)
    int extraProgress = (int) (mPeak / mRadius * 100);
    setProgress(extraProgress == 0 ? 101 : 100 + extraProgress);
}

3.裁剪画布显示为圆形进度

demo

下载链接

FEATURED TAGS
Android