怎樣做QQ上酷炫的人？看！Android仿QQ 傳送圖片時載入效果

之前看到qq 的圖片傳送效果很酷炫，很吸引人，不過現在這個效果好像沒有了。

試了幾次,決定試試實現。大致想了下，實現效果還不錯需要實現的效果一圖勝千言，看圖如下：

怎樣實現呢？

首先從圖中看分兩部分，一部分是進度條帶光暈得效果。第二部分是圓圈擴散到整個圖片，到顯示完整圖片的過程。接下來一步一步跟著程式碼分析實現。1、繪製的範圍包括圖片顯示都在圓角矩形內，所以首先要裁剪 canvas到圓角矩形。

  val path = Path()
          canvas.save()
          path.addRoundRect(RectF(0f, 0f, width.toFloat(), height.toFloat())
                  , round, round, Path.Direction.CW)
          canvas.clipPath(path)

先儲存畫布， save()到最後要 canvas.restore()。因為顯示圖片，可以有兩種選擇，第一種：自己繪製圖片，透過 drawable得方式。第二種：繼承ImageView 同時還可以獲得ImageView提供的各種屬性， scaleType之類。本質上ImageView也是通Drawable實現。IamgeView還幫我們處理了測量的狂傲，所以有什麼理由不選擇繼承呢。然後繪製圖片只有簡單一行程式碼，再裁剪畫布之後：

  super.onDraw(canvas)

2、繪製背景

可以看到效果圖，圖片在黑色半透明的下方。並且在最後顯示出來。著一點都是跟canvas繪製背景相關的。不多說，先設定畫筆。

  private var paint: Paint = Paint()
      paint.isAntiAlias = true
      paint.color = getColor(R.color.bantouming)

背景怎麼繪製，直接透過 canvas.drawPaint方法即可實現。把 paint的顏色繪製到整個畫布。並且再圖片後邊繪製，所以在上方。

  canvas.drawPaint(paint)

3、繪製進度

這裡根據每一階段狀態的不同，透過三個狀態值區分：

  companion object {          private const val READY = 1
          private const val PROGRESS = 2
          private const val FINISH = 3
      }

為了方便的繪製，並且整個view是對稱的。所以座標點移動到view中心，非常有利於實現。

   canvas.save()
       canvas.translate(width / 2f, height / 2f)

當然最後別忘了 canvas.restore() 。在中間都好說了。先看百分比的實現。主要是drawText()的x,y比較不好掌握，不過搞明白基線之類的，就沒問題了。先看百分比的 paint

  private val textPaint by lazy {
          Paint().apply {
              isAntiAlias = true
              style = Paint.Style.STROKE
              textSize = dp2px(16f).toFloat()
              color = getColor(R.color.main_gray)
          }
      }

接下來繪製，這行程式碼可能比較長。需要最佳化，到這裡就先別吐槽。有點偷懶。可以看到根據文字的寬，高。來繪製的。高這裡需要額外注意

  textPaint.textHeight().div(2) - textPaint.descent()

需要減去textPiat.descent(),如果不減繪製會偏下。

  val text = "${progress}%"
    canvas.drawText(text, 0 - textPaint.measureText(text).div(2), textPaint.textHeight().div(2) - textPaint.descent(), textPaint)

4、繪製光暈

這算是實現比較疑難的地方。要注意3個地方：

• 1.光暈的實現
• 2.呼吸效果
• 3. PorterDuffXmode 使用。

先看呼吸效果如何實現。可能簡單的想到的是透過圓環實現。但這樣挺麻煩的，如果透過兩個圓疊加，並設定 paint.xfermode(PorterDuff.Mode.DST_OUT)``,可實現把內部圓裁剪掉。關於怎麼使用，請看之前的關於xfermode的文章。光暈的實現需要依賴shader ,這裡透過RadilGradient 實現。具體用法也可看之前文章。設定shader`

    paint.setShader(RadialGradient(0f, 0f, outRadius
                          , intArrayOf(Color.TRANSPARENT, Color.WHITE, Color.WHITE, Color.TRANSPARENT)
                          , floatArrayOf(0.1f, 0.4f, 0.8f, 1f), Shader.TileMode.CLAMP))

接下來的呼吸效果透過動畫設定大圓半徑的變化來實現。

  canvas.drawCircle(0f, 0f, innRaduus + (outRadius - innRaduus) * animatorValue, paint)

完整程式碼如下

  canvas.drawCircle(0f, 0f, innRaduus + (outRadius - innRaduus) * animatorValue, paint)
  paint.setXfermode(PorterDuffXfermode(PorterDuff.Mode.DST_OUT))
  paint.setShader(null)
  paint.color = Color.WHITE
  canvas.drawCircle(0f, 0f, innRaduus, paint)
  paint.setXfermode(null)

如果僅僅是這樣那麼繪製出來中間喝一個黑洞。因為背景是透明的。所以這時候在繪製之前需要 canvas.savlayer。如下

  val sc = canvas.saveLayer(-outRadius, -outRadius, outRadius, outRadius, paint, Canvas.ALL_SAVE_FLAG)

儲存的範圍包括大圓小圓最後要 restore

  canvas.restoreToCount(sc)

再加上 animatorValue 從0到1的動畫就完成PROGRES階段的動畫了。

5、繪製FINISH，揭露圖片效果

同樣這裡也需要使用 PorterDuff.Mode.DST_OUT，不過這裡需要的是對整個圓角畫布範圍進行操作。DST 是 canvas.drawPaint繪製的背景。 SRC 是一整個圓角矩形對角線的一半為最大半徑，從 PROGRES 狀態大圓的半徑的範圍，到最大範圍的動畫變化。如下：

  val sc = canvas.saveLayer(-width.div(2f), -height.div(2f), width.div(2f), height.div(2f), paint, Canvas.ALL_SAVE_FLAG)
                  canvas.drawPaint(paint)
                val maxRadius = Math.sqrt(Math.pow(width.toDouble(), 2.0) + Math.pow(height.toDouble(), 2.0)).div(2)
                  paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
                  paint.color = Color.WHITE
                  canvas.drawCircle(0f, 0f, (outRadius + (maxRadius - outRadius) * finishAnimValue).toFloat(), paint)
                  paint.xfermode = null
                  canvas.restoreToCount(sc)

動畫的使用與交替。這一點比較簡單的 ValueAnimator的使用，設定屬性， Listener即可。

用上了這個，你會成為qq上發圖片最酷炫的崽，我們們程式們還是有很多有趣的事的，

當然。我們要學的東西有很多，多會一點技能，就多一層保障。

畢竟，要想不被環境淘汰就只有不斷提升自己，從來都是我們去適應環境，而不是環境來適應我們！

附上我的Android核心技術大綱，獲取相關內容來我的GitHub一起玩耍：