水波纹进度条实现

水波纹进度条实现

参考文章

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

我的思路

水波示意图：

如何绘制水波

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

如何让水波动起来

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

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

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

如何让进度平滑过度

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

解决方案如下：

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