欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2018年03月27日 14:08:33   作者：Lin_Zero  
這篇文章主要為大家詳細(xì)介紹了Android ShimmerLayout實(shí)現(xiàn)微光效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

這里寫圖片描述

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

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

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

這里寫圖片描述

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)，微光效果是從左向右移動過去的，如何實(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();

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

更多細(xì)節(jié)，看看作者的原文介紹以及GitHub

ShimmerLayout Github : https://github.com/team-supercharge/ShimmerLayout

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論