Android ShimmerLayout如何實(shí)現(xiàn)微光效果解析

這篇文章主要介紹了Android ShimmerLayout如何實(shí)現(xiàn)微光效果解析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

前陣子在github上看到一個(gè)很不錯(cuò)的動(dòng)畫效果，叫做ShimmerLayout，是一個(gè)用于實(shí)現(xiàn)內(nèi)部視圖微光效果的布局。

如何實(shí)現(xiàn)

通過使用PorterDuff，我們可以制造出微光效果。PorterDuff是canvas繪制圖像處理中的一種渲染模式，當(dāng)我們需要繪制出區(qū)域覆蓋的圖形效果的時(shí)候，我們可以使用這種方式來繪制。

這里我們采用的是PorterDuff.MODE.SRC_IN，意思是在繪制的時(shí)候，顯示上下圖層相交的部分，且這部分顯示上層圖層。

1） 首先我們需要繪制出最上層的微光，這里通過LinearGradient線性漸變渲染器來繪制微光漸變效果，為了使得漸變自然，我們看到，代碼里在前后兩端都加入了透明色。

private Bitmap getSourceMaskBitmap() {
  if (sourceMaskBitmap != null) {
   return sourceMaskBitmap;
  }

  int width = maskRect.width();
  int height = getHeight();

  /* 通過LinearGradient在遮罩Bitmap上繪制漸變效果 */
  final int edgeColor = reduceColorAlphaValueToZero(shimmerColor);
  LinearGradient gradient = new LinearGradient(
    -maskRect.left, 0,
    width + maskRect.left, 0,
    /* 透明色 - 微光顏色 - 微光顏色 - 透明色 */
    new int[]{edgeColor, shimmerColor, shimmerColor, edgeColor},
    new float[]{0.25F, 0.47F, 0.53F, 0.75F},
    Shader.TileMode.CLAMP);

  Paint paint = new Paint();
  paint.setShader(gradient);

  sourceMaskBitmap = createBitmap(width, height);
  /* 對微光效果的bitmap做一些旋轉(zhuǎn)效果 */
  Canvas canvas = new Canvas(sourceMaskBitmap);
  canvas.rotate(shimmerAngle, width / 2, height / 2);
  canvas.drawRect(-maskRect.left, maskRect.top, width + maskRect.left, maskRect.bottom, paint);

  return sourceMaskBitmap;
 }

2）、然后，我們需要把微光效果的圖層和視圖本身的界面混合，使用PorterDuff.MODE.SRC_IN混合效果。首先如何繪制視圖本身的界面，這里很簡單，直接調(diào)用父類的繪制方法super.dispatchDraw(Canvas)，緊接著再繪制微光效果的圖層。

/* 獲取微光效果Bitmap */
localMaskBitmap = getSourceMaskBitmap();
canvas.save();
/* 先繪制GroupView本身的界面 */
super.dispatchDraw(canvas);
/* 再繪制微光效果Bitmap */
canvas.drawBitmap(localMaskBitmap, 0, 0, maskPaint);
canvas.restore();

3） 最后我們發(fā)現(xiàn)，微光效果是從左向右移動(dòng)過去的，如何實(shí)現(xiàn)？

通過不斷位移localMaskBitmap的位置，這里通過控制偏移值maskOffsetX，實(shí)現(xiàn)了微光慢慢位移的效果。

/* 獲取微光效果Bitmap */
localMaskBitmap = getSourceMaskBitmap();
canvas.save();
/* canvas 裁剪顯示 */
canvas.clipRect(maskOffsetX, 0,
        maskOffsetX + localMaskBitmap.getWidth(),
        getHeight());
/* 先繪制GroupView本身的界面 */
super.dispatchDraw(canvas);
/* 再繪制微光效果Bitmap */
canvas.drawBitmap(localMaskBitmap, maskOffsetX, 0, maskPaint);
canvas.restore();

這個(gè)動(dòng)畫原理本身很簡單，不過在內(nèi)存方面，因?yàn)閯?chuàng)建了多個(gè)bitmap，如果當(dāng)前界面不包含大圖，對內(nèi)存的消耗還是很低的，適用于為比較輕量級的界面添加效果。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Android ShimmerLayout如何實(shí)現(xiàn)微光效果解析”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!