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

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

這篇文章主要介紹了AndroidShimmerLayout如何實(shí)現(xiàn)微光效果解析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。前陣子在github上看到一個(gè)很不錯(cuò)的動(dòng)畫(huà)效果，叫做ShimmerLayout，是一個(gè)用于實(shí)現(xiàn)內(nèi)部視圖微光效果的布局。如何實(shí)現(xiàn)通過(guò)使用PorterDuff，我們可以制造出微光效果。PorterDuff是canvas繪制圖像處理中的一種渲染模式，當(dāng)我們需要繪制出區(qū)域覆蓋的圖形效果的時(shí)候，我們可以使用這種方式來(lái)繪制。這里我們采用的是PorterDuff.MODE.SRC_IN，意思是在繪制的時(shí)候，顯示上下圖層相交的部分，且這部分顯示上層圖層。1）首先我們需要繪制出最上層的微光，這里通過(guò)LinearGradient線性漸變渲染器來(lái)繪制微光漸變效果，為了使得漸變自然，我們看到，代碼里在前后兩端都加入了透明色。private

Bitmap

getSourceMaskBitmap()

{

if

(sourceMaskBitmap

!=

null)

{

return

sourceMaskBitmap;

}

int

width

=

maskRect.width();

int

height

=

getHeight();

/*

通過(guò)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);

/*

對(duì)微光效果的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混合效果。首先如何繪制視圖本身的界面，這里很簡(jiǎn)單，直接調(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)過(guò)去的，如何實(shí)現(xiàn)？通過(guò)不斷位移localMaskBitmap的位置，這里通過(guò)控制偏移值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,

maskOffset