轉自：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0312/4049.html
原文出處：wingjay的博客。
在iOS設備上我們隨處可見毛玻璃效果，而且最近越來越多的場合應用到了這種美觀的虛化效果，包括本人的一個開源項目BlureImageView也是受此啓發。所以，恰到好處的虛化效果能很好的改善用戶體驗，而且也能讓你的app顯得更加優雅。
不過，我們目前在android上很少見到毛玻璃效果，我認爲很重要的原因是性能問題，虛化一張圖片所需要的時間會因設備而異，如果爲了虛化使得用戶需要刻意等待，那麼就是弊大於利。另外，Google官方提供的renderScript一般只是做一些小幅度的虛化，很難達到毛玻璃這類深度虛化效果。
所以本文的角度是能夠在android設備上快速實現毛玻璃效果。
StackBlur
首先，爲了實現毛玻璃效果，本文采用的是StackBlur模糊算法，這種算法應用非常廣泛，能得到非常良好的毛玻璃效果。在這裏，我們使用的是它的Java實現代碼FastBlur.java。
package com.wingjay.blurimageviewlib;
import android.graphics.Bitmap;
/**
* Created by jay on 11/7/15.
*/
public class FastBlurUtil {
public static Bitmap doBlur(Bitmap sentBitmap, int radius, boolean canReuseInBitmap) {
// Stack Blur v1.0 from
// http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
//
// Java Author: Mario Klingemann <mario at quasimondo.com>
// http://incubator.quasimondo.com
// created Feburary 29, 2004
// Android port : Yahel Bouaziz <yahel at kayenko.com>
// http://www.kayenko.com
// ported april 5th, 2012
// This is a compromise between Gaussian Blur and Box blur
// It creates much better looking blurs than Box Blur, but is
// 7x faster than my Gaussian Blur implementation.
//
// I called it Stack Blur because this describes best how this
// filter works internally: it creates a kind of moving stack
// of colors whilst scanning through the image. Thereby it
// just has to add one new block of color to the right side
// of the stack and remove the leftmost color. The remaining
// colors on the topmost layer of the stack are either added on
// or reduced by one, depending on if they are on the right or
// on the left side of the stack.
//
// If you are using this algorithm in your code please add
// the following line:
//
// Stack Blur Algorithm by Mario Klingemann <[email protected]>
Bitmap bitmap;
if (canReuseInBitmap) {
bitmap = sentBitmap;
} else {
bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);
}
if (radius < 1) {
return (null);
}
int w = bitmap.getWidth();
int h = bitmap.getHeight();
int[] pix = new int[w * h];
bitmap.getPixels(pix, 0, w, 0, 0, w, h);
int wm = w - 1;
int hm = h - 1;
int wh = w * h;
int div = radius + radius + 1;
int r[] = new int[wh];
int g[] = new int[wh];
int b[] = new int[wh];
int rsum, gsum, bsum, x, y, i, p, yp, yi, yw;
int vmin[] = new int[Math.max(w, h)];
int divsum = (div + 1) >> 1;
divsum *= divsum;
int dv[] = new int[256 * divsum];
for (i = 0; i < 256 * divsum; i++) {
dv[i] = (i / divsum);
}
yw = yi = 0;
int[][] stack = new int[div][3];
int stackpointer;
int stackstart;
int[] sir;
int rbs;
int r1 = radius + 1;
int routsum, goutsum, boutsum;
int rinsum, ginsum, binsum;
for (y = 0; y < h; y++) {
rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
for (i = -radius; i <= radius; i++) {
p = pix[yi + Math.min(wm, Math.max(i, 0))];
sir = stack[i + radius];
sir[0] = (p & 0xff0000) >> 16;
sir[1] = (p & 0x00ff00) >> 8;
sir[2] = (p & 0x0000ff);
rbs = r1 - Math.abs(i);
rsum += sir[0] * rbs;
gsum += sir[1] * rbs;
bsum += sir[2] * rbs;
if (i > 0) {
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
} else {
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
}
}
stackpointer = radius;
for (x = 0; x < w; x++) {
r[yi] = dv[rsum];
g[yi] = dv[gsum];
b[yi] = dv[bsum];
rsum -= routsum;
gsum -= goutsum;
bsum -= boutsum;
stackstart = stackpointer - radius + div;
sir = stack[stackstart % div];
routsum -= sir[0];
goutsum -= sir[1];
boutsum -= sir[2];
if (y == 0) {
vmin[x] = Math.min(x + radius + 1, wm);
}
p = pix[yw + vmin[x]];
sir[0] = (p & 0xff0000) >> 16;
sir[1] = (p & 0x00ff00) >> 8;
sir[2] = (p & 0x0000ff);
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
rsum += rinsum;
gsum += ginsum;
bsum += binsum;
stackpointer = (stackpointer + 1) % div;
sir = stack[(stackpointer) % div];
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
rinsum -= sir[0];
ginsum -= sir[1];
binsum -= sir[2];
yi++;
}
yw += w;
}
for (x = 0; x < w; x++) {
rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
yp = -radius * w;
for (i = -radius; i <= radius; i++) {
yi = Math.max(0, yp) + x;
sir = stack[i + radius];
sir[0] = r[yi];
sir[1] = g[yi];
sir[2] = b[yi];
rbs = r1 - Math.abs(i);
rsum += r[yi] * rbs;
gsum += g[yi] * rbs;
bsum += b[yi] * rbs;
if (i > 0) {
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
} else {
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
}
if (i < hm) {
yp += w;
}
}
yi = x;
stackpointer = radius;
for (y = 0; y < h; y++) {
// Preserve alpha channel: ( 0xff000000 & pix[yi] )
pix[yi] = (0xff000000 & pix[yi]) | (dv[rsum] << 16) | (dv[gsum] << 8) | dv[bsum];
rsum -= routsum;
gsum -= goutsum;
bsum -= boutsum;
stackstart = stackpointer - radius + div;
sir = stack[stackstart % div];
routsum -= sir[0];
goutsum -= sir[1];
boutsum -= sir[2];
if (x == 0) {
vmin[y] = Math.min(y + r1, hm) * w;
}
p = x + vmin[y];
sir[0] = r[p];
sir[1] = g[p];
sir[2] = b[p];
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
rsum += rinsum;
gsum += ginsum;
bsum += binsum;
stackpointer = (stackpointer + 1) % div;
sir = stack[stackpointer];
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
rinsum -= sir[0];
ginsum -= sir[1];
binsum -= sir[2];
yi += w;
}
}
bitmap.setPixels(pix, 0, w, 0, 0, w, h);
return (bitmap);
}
}
|
1
|
public static Bitmap doBlur(Bitmap sentBitmap, int radius, boolean canReuseInBitmap) |
可以看出，使用方法非常簡單，傳入待虛化的bitmap、虛化程序(一般爲8)、和是否重用flag。
然後，如果要對上面這張圖片進行虛化，我們可以通過把它轉化成bitmap傳入虛化，看起來很簡單就解決了，但事實並非如此。
OOM
如果直接把一張大圖傳入，很容易就會發生OOM內存溢出
|
1
2
3
4
5
6
7
|
03-11 21:02:02.014 16727-16742/com.wingjay.jayandroid I/art: Clamp target GC heap from 109MB to 96MB03-11 21:02:02.026 16727-16727/com.wingjay.jayandroid I/art: Clamp target GC heap from 109MB to 96MB03-11 21:02:02.030 16727-16727/com.wingjay.jayandroid I/art: Clamp target GC heap from 109MB to 96MB03-11 21:02:02.031 16727-16727/com.wingjay.jayandroid I/art: Forcing collection of SoftReferences for 30MB allocation03-11 21:02:02.035 16727-16727/com.wingjay.jayandroid I/art: Clamp target GC heap from 109MB to 96MB03-11 21:02:02.036 16727-16727/com.wingjay.jayandroid E/art: Throwing OutOfMemoryError "Failed to allocate a 32175012 byte allocation with 2648672 free bytes and 2MB until OOM"03-11 21:02:02.036 16727-16727/com.wingjay.jayandroid D/AndroidRuntime: Shutting down VM |
這是我直接對原圖進行虛化得到的log信息。可以看出當虛化開始時，虛擬機開始不斷進行內存回收，包括把所有軟引用的內存回收。然而，仍然導致了內存溢出。
那就意味着我只能虛化小圖，這樣才能防止內存溢出。但是我並不想換其他圖，那麼，我們就應該把這張圖縮放。
ReScale
|
1
|
public static Bitmap createScaledBitmap(Bitmap src, int dstWidth, int dstHeight, boolean filter) {} |
我們可以利用這個function來進行bitmap的縮放。其中前三個參數很明顯，其中寬高我們可以選擇爲原圖尺寸的1/10；第四個filter是指縮放的效果，filter爲true則會得到一個邊緣平滑的bitmap，反之，則會得到邊緣鋸齒、pixelrelated的bitmap。這裏我們要對縮放的圖片進行虛化，所以無所謂邊緣效果，filter=false。
所以，我們要使用
|
1
2
3
4
5
6
7
8
9
|
int scaleRatio = 10;int blurRadius = 8;Bitmap scaledBitmap = Bitmap.createScaledBitmap(originBitmap, originBitmap.getWidth() / scaleRatio, originBitmap.getHeight() / scaleRatio, false);Bitmap blurBitmap = FastBlur.doBlur(scaledBitmap, blurRadius, true);imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);imageView.setImageBitmap(blurBitmap); |
可以得到如下效果:
從圖中可以看出，首先可以確定思路是對的；然後，可以看出毛玻璃效果還不是特別的明顯。爲了得到如iOS那樣的虛化效果，我們有兩種方法：
-
增大scaleRatio縮放比，使用一樣更小的bitmap去虛化可以得到更好的模糊效果，而且有利於佔用內存的減小；
-
增大blurRadius，可以得到更高程度的虛化，不過會導致CPU更加intensive
這裏本人通過增大縮放比來實驗。
-
scaleRatio = 20
![]()
-
scaleRatio = 35
![]()
-
scaleRatio = 50
![]()
-
scaleRatio = 100
![scaleRatio_100]()
通過上面對比圖我們可以找出最適合自己的虛化效果。
Performance analysis
那麼，要實現這樣的效果，是否具有損害用戶體驗的風險呢？下面，我們從消耗時間和佔據內存的角度來進行分析。
Time Consuming
爲了分析虛化一張圖片所消耗的時間，本文通過同時虛化100來獲取平均消耗時間。以期對虛化耗時和不同縮放比對耗時的影響得到一定的認識。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
long start = System.currentTimeMillis();Bitmap scaledBitmap, blurBitmap;int scaleRatio = 10;int loopCount = 100for (int i=0; i<loopCount; i++) { scaledBitmap = Bitmap.createScaledBitmap(originBitmap, originBitmap.getWidth() / scaleRatio, originBitmap.getHeight() / scaleRatio, false); blurBitmap = FastBlur.doBlur(scaledBitmap, 8, true);}Log.i("blurtime", String.valueOf(System.currentTimeMillis() - start)); |
-
scaleRatio = 10: 耗時887ms，平均耗時8.87ms;
-
scaleRatio = 20: 耗時224ms，平均耗時2.24ms;
-
scaleRatio = 35: 耗時99ms，平均耗時0.99ms;
-
scaleRatio = 50: 耗時55ms，平均耗時0.55ms;
-
scaleRatio = 100: 耗時29ms，平均耗時0.29ms;
爲了方便讀者瞭解效果，我通過多組數據擬合了下面的曲線：
從該模擬圖可以看出時間隨着縮放比的增大而不斷減小，當縮放比達到30以上時所消耗的時間不到1ms，因此，我認爲應該是完全不會產生時延破壞用戶體驗的。
Memory Consuming
既然時間沒問題，那麼，主要問題：內存佔用就來了，所以我們需要考察生成一張虛化圖片所佔用的內存。
爲了測試對一張圖片進行虛化所佔用內存的變化，我們改變虛化次數，即修改上面的loopCount並觀察對內存的變化。其中scaleRatio = 10，以獲得相對較大的內存消耗。
-
loopCount = 1
![]()
-
loopCount = 10
![]()
-
loopCount = 20
![]()
-
loopCount = 50
![]()
-
loopCount = 100
![]()
-
loopCount = 300
![]()
從上面的內存消耗圖，可以看出虛化的確會佔用一定內存，如果大量的虛化同時發生，則會由於UI線程突然加載很多bitmap而導致內存抖動。
Conclusion
希望大家如果有其他測試方法或者意見多多留言，從而繼續改進性能。
附上本文所採用的
