【移動應(yīng)用開發(fā)技術(shù)】Android ShimmerLayout如何實現(xiàn)微光效果解析

【移動應(yīng)用開發(fā)技術(shù)】AndroidShimmerLayout如何實現(xiàn)微光效果解析

這篇文章主要介紹了AndroidShimmerLayout如何實現(xiàn)微光效果解析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。前陣子在github上看到一個很不錯的動畫效果，叫做ShimmerLayout，是一個用于實現(xiàn)內(nèi)部視圖微光效果的布局。如何實現(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)，微光效果是從左向右移動過去的，如何實現(xiàn)？通過不斷位移localMaskBitmap的位置，這里通過控制偏移值maskOffsetX，實現(xiàn)了微光慢慢位移的效果。/*

獲取微光效果Bitmap

*/

localMaskBitmap

=

getSourceMaskBitmap();

canvas.save();

/*

canvas

裁剪顯示

*/

canvas.clipRect(maskOffsetX,

0,

maskOffsetX

+

localMaskBitmap.getWidth(),

getHeight());

/*

先繪制GroupView本身的界面

*/

super.dispatchDraw(canvas);

/*

再繪制微光效果Bitmap

*/

canvas.drawBitmap(localMaskBitmap,

maskOffset