轻松搞定炫彩填充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)
  

• 进度控制
  进度与裁剪的范围成反比，具体如何控制要根据裁剪类型进行设置。

完整代码及样例已增加到Github仓库中, 欢迎指正！