前陣子在github上看到一個很不錯的動畫效果，叫做ShimmerLayout，是一個用于實現內部視圖微光效果的布局。
如何實現
通過使用PorterDuff，我們可以制造出微光效果。PorterDuff是canvas繪制圖像處理中的一種渲染模式，當我們需要繪制出區域覆蓋的圖形效果的時候，我們可以使用這種方式來繪制。
這里我們采用的是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做一些旋轉效果 */ 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混合效果。首先如何繪制視圖本身的界面，這里很簡單，直接調用父類的繪制方法super.dispatchDraw(Canvas)，緊接著再繪制微光效果的圖層。
/* 獲取微光效果Bitmap */localMaskBitmap = getSourceMaskBitmap();canvas.save();/* 先繪制GroupView本身的界面 */super.dispatchDraw(canvas);/* 再繪制微光效果Bitmap */canvas.drawBitmap(localMaskBitmap, 0, 0, maskPaint);canvas.restore();
3） 最后我們發現，微光效果是從左向右移動過去的，如何實現？
通過不斷位移localMaskBitmap的位置，這里通過控制偏移值maskOffsetX，實現了微光慢慢位移的效果。
/* 獲取微光效果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();
這個動畫原理本身很簡單，不過在內存方面，因為創建了多個bitmap，如果當前界面不包含大圖，對內存的消耗還是很低的，適用于為比較輕量級的界面添加效果。
更多細節，看看作者的原文介紹以及GitHub
ShimmerLayout Github : https://github.com/team-supercharge/ShimmerLayout
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
