水波纹进度条实现

移动开发 waitig 767℃ 百度已收录 0评论

水波纹进度条实现

参考文章

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%进度时,再增加额外进度

//进度到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

下载链接


本文由【waitig】发表在等英博客
本文固定链接:水波纹进度条实现
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)