輕鬆搞定炫彩填充ProgressBar

摘要： 文章名字似乎不是很明確，但暫時沒有更好的名字。那就乾脆先看看效果吧： device-2018-09-04-010120.2018-09-04 01_05_42.gif device-2018-09-13-2357...

文章名字似乎不是很明確，但暫時沒有更好的名字。那就乾脆先看看效果吧：

<b>怎麼樣效果還可以吧！類似這樣，也可以做出電池充電的效果 </b>

• 首先先分析如何實現：
  1. 畫出來，這個對於簡單圖形來說可以。但如上圖中的圖形，要想繪製就會比較麻煩。
  2. 使用svg，上圖是我從IconFont下載的一張圖，IconFont提供svg和PNG兩種格式下載。通過svg動畫可以實現填充效果，但不知道如何控制進度。可能需要轉換成path。
  3. 第三中方法就是我現在用的，很簡單但很有效。在PS中有一個重要的概念-蒙版，通過蒙版我們可以在不影響底部圖層的情況下，將新的內容融合到圖層中。在本文中就相當於將有色彩的部分融合到黑白圖層上。進度的變化就相當於對蒙版進行裁剪。

<table><tr><td style='text-shadow: 2px 2px 3px #36648B; '> 程式碼實現 </td></tr></table>

• 定義底部圖層和蒙版層：

  底部是灰色的，上層是彩色的

  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)

• 進度控制

  進度與裁剪的範圍成反比，具體如何控制要根據裁剪型別進行設定。

<b>完整程式碼及樣例已增加到 ofollow,noindex">Github倉庫中 , 歡迎指正！</b>