轻松搞定炫彩填充ProgressBar

小小码 • 2023-08-06 14:30 • 未分类 • 阅读 164

大家好，我是考100分的小小码，祝大家学习进步，加薪顺利呀。今天说一说轻松搞定炫彩填充ProgressBar,希望您对编程的造诣更进一步.

文章名字似乎不是很明确，但暂时没有更好的名字。那就干脆先看看效果吧：

device-2018-09-04-010120.2018-09-04 01_05_42.gif

device-2018-09-13-235735.2018-09-13 23_58_50.gif

device-2018-09-13-235843.2018-09-13 23_59_45.gif

怎么样效果还可以吧！类似这样，也可以做出电池充电的效果

首先先分析如何实现：
1. 画出来，这个对于简单图形来说可以。但如上图中的图形，要想绘制就会比较麻烦。
2. 使用svg，上图是我从IconFont下载的一张图，IconFont提供svg和PNG两种格式下载。通过svg动画可以实现填充效果，但不知道如何控制进度。可能需要转换成path。
3. 第三中方法就是我现在用的，很简单但很有效。在PS中有一个重要的概念-蒙版，通过蒙版我们可以在不影响底部图层的情况下，将新的内容融合到图层中。在本文中就相当于将有色彩的部分融合到黑白图层上。进度的变化就相当于对蒙版进行裁剪。

代码实现

定义底部图层和蒙版层：
底部是灰色的，上层是彩色的
```
var bg: Bitmap? = null
var mask: Bitmap? = null
```

裁剪：
裁剪是核心所在，通过裁剪变化产生视觉上填充的效果

矩形裁剪

canvas.clipRect(0, calculateClipTop(progress), width, height)

圆形裁剪

path.addCircle(width / 2f, height / 2f, (progress * 1f / max) * (Math.max(width, height) / 2f), Path.Direction.CCW)
            path.close()
            canvas.clipPath(path)

不规则裁剪，这里简单用了下贝塞尔曲线

val baseHeight = (1- progress * 1f / max) * height
            var waveHeight = Math.min(50f, baseHeight)
            val left = 20f
            val right = width - 20f
            rate = (rate + 10) % max
            val actRate = rate * 1f / max
            waveHeight *= actRate
            path.moveTo(left,baseHeight + waveHeight)
            path.quadTo(right * 0.25f, baseHeight,right * 0.5f,baseHeight + waveHeight)
            path.quadTo(right / 0.75f, baseHeight + 2 * waveHeight ,right * 1f,baseHeight + waveHeight)
            path.lineTo(right * 1f, height * 1f)
            path.lineTo(left,height * 1f)
            path.lineTo(left,baseHeight + waveHeight)
            path.close()
            canvas.clipPath(path)