Android UI效果實現 滑動模糊漸變效果實現

前言：

大家應該都看到過iOS7解鎖屏幕的滑動模糊漸變效果，好了，現在可以把手紙收起來了，今天黃老師就給大家講一下如何在Android平臺上

實現類似的滑動模糊漸變效果，其實方式遠比你想像的簡單。

目標效果展示：

第一部分：幾個前提

說到模糊效果，我們先要了解幾個前提

1、原圖，指需要被模糊的一張位圖

2、模糊，通常是采用指將一個位圖的每個像素RGB值都取周圍像素的RGB值的平均值，這樣就可以產生模糊效果，一般通過高斯函數來實現，

至于Java中的實現方式黃老師就不給大家細講了，我也不是搞圖形算法的，在這方面了解的不比大家多，百度一下能找到一堆高斯模糊轉換的實現。

3、模糊半徑，指每個像素點周圍模糊的半徑，半徑越大，模糊程度約高，模糊效果越明顯，同時，模糊計算耗費時間越長。

4、模糊處理非常費時，一半在100ms～5000ms內，就黃老師我本人找的網上的算法實測，一般android通過java實現的高斯模糊算法轉換一張手機

屏幕分辨率為480x800的位圖需要2s左右，所以如果要在滑動的過程中實時不斷重新計算模糊效果會非常差，所以如果要實現iOS7那樣的滑動動態模糊

漸變效果，用這樣的方式是不可行的，實際上iOS也不是這么做的，因為iOS的硬件也沒達到能實時計算的程度。

那么究竟應該如何去實現模糊漸變呢，其實非常簡單，我們接著講。

第二部分：動態模糊漸變的合理實現方式

其實，我的方式非常簡單，首先你需要明確一個最大的模糊效果的模糊半徑值，我們給它取個名字叫maxRadius，然后使用maxRadius和原圖傳入高斯模糊算法

中計算出最大模糊效果的位圖maxBlurBitmap。

然后，在ui組件中，假設我的原圖是用一個ImageView顯示在界面上的，然后你所需要做的是，再創建一個ImageView置于原圖ImageView之上，然后將圖片源

設置為maxBlurBitmap，如下圖：

接著，我們只需要簡單的調整maxBlurBitmap的透明度，即可實現模糊漸變效果了，是否很簡單呢？

第三部分，提供一個最簡單的Java高斯模糊實現，我網上找來的，方便偷懶不愿自己找的同學

  1 /**
  2  * 位圖處理類
  3  * @author HalfmanG2
  4  */
  5 public class BitmapUtil {
  6 
  7     /**
  8      * 創建一個虛化的位圖
  9      * @param sentBitmap 原位圖
 10      * @param radius 虛化半徑
 11      * @return 虛化后的位圖
 12      */
 13     public static Bitmap createBlurBitmap(Bitmap sentBitmap, int radius) {
 14         Bitmap bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);
 15         if (radius < 1) {
 16             return (null);
 17         }
 18         int w = bitmap.getWidth();
 19         int h = bitmap.getHeight();
 20         int[] pix = new int[w * h];
 21         bitmap.getPixels(pix, 0, w, 0, 0, w, h);
 22         int wm = w - 1;
 23         int hm = h - 1;
 24         int wh = w * h;
 25         int div = radius + radius + 1;
 26         int r[] = new int[wh];
 27         int g[] = new int[wh];
 28         int b[] = new int[wh];
 29         int rsum, gsum, bsum, x, y, i, p, yp, yi, yw;
 30         int vmin[] = new int[Math.max(w, h)];
 31         int divsum = (div + 1) >> 1;
 32         divsum *= divsum;
 33         int dv[] = new int[256 * divsum];
 34         for (i = 0; i < 256 * divsum; i++) {
 35             dv[i] = (i / divsum);
 36         }
 37         yw = yi = 0;
 38         int[][] stack = new int[div][3];
 39         int stackpointer;
 40         int stackstart;
 41         int[] sir;
 42         int rbs;
 43         int r1 = radius + 1;
 44         int routsum, goutsum, boutsum;
 45         int rinsum, ginsum, binsum;
 46         for (y = 0; y < h; y++) {
 47             rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
 48             for (i = -radius; i <= radius; i++) {
 49                 p = pix[yi + Math.min(wm, Math.max(i, 0))];
 50                 sir = stack[i + radius];
 51                 sir[0] = (p & 0xff0000) >> 16;
 52                 sir[1] = (p & 0x00ff00) >> 8;
 53                 sir[2] = (p & 0x0000ff);
 54                 rbs = r1 - Math.abs(i);
 55                 rsum += sir[0] * rbs;
 56                 gsum += sir[1] * rbs;
 57                 bsum += sir[2] * rbs;
 58                 if (i > 0) {
 59                     rinsum += sir[0];
 60                     ginsum += sir[1];
 61                     binsum += sir[2];
 62                 } else {
 63                     routsum += sir[0];
 64                     goutsum += sir[1];
 65                     boutsum += sir[2];
 66                 }
 67             }
 68             stackpointer = radius;
 69             for (x = 0; x < w; x++) {
 70                 r[yi] = dv[rsum];
 71                 g[yi] = dv[gsum];
 72                 b[yi] = dv[bsum];
 73                 rsum -= routsum;
 74                 gsum -= goutsum;
 75                 bsum -= boutsum;
 76                 stackstart = stackpointer - radius + div;
 77                 sir = stack[stackstart % div];
 78                 routsum -= sir[0];
 79                 goutsum -= sir[1];
 80                 boutsum -= sir[2];
 81                 if (y == 0) {
 82                     vmin[x] = Math.min(x + radius + 1, wm);
 83                 }
 84                 p = pix[yw + vmin[x]];
 85                 sir[0] = (p & 0xff0000) >> 16;
 86                 sir[1] = (p & 0x00ff00) >> 8;
 87                 sir[2] = (p & 0x0000ff);
 88                 rinsum += sir[0];
 89                 ginsum += sir[1];
 90                 binsum += sir[2];
 91                 rsum += rinsum;
 92                 gsum += ginsum;
 93                 bsum += binsum;
 94                 stackpointer = (stackpointer + 1) % div;
 95                 sir = stack[(stackpointer) % div];
 96                 routsum += sir[0];
 97                 goutsum += sir[1];
 98                 boutsum += sir[2];
 99                 rinsum -= sir[0];
100                 ginsum -= sir[1];
101                 binsum -= sir[2];
102                 yi++;
103             }
104             yw += w;
105         }
106         for (x = 0; x < w; x++) {
107             rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
108             yp = -radius * w;
109             for (i = -radius; i <= radius; i++) {
110                 yi = Math.max(0, yp) + x;
111                 sir = stack[i + radius];
112                 sir[0] = r[yi];
113                 sir[1] = g[yi];
114                 sir[2] = b[yi];
115                 rbs = r1 - Math.abs(i);
116                 rsum += r[yi] * rbs;
117                 gsum += g[yi] * rbs;
118                 bsum += b[yi] * rbs;
119                 if (i > 0) {
120                     rinsum += sir[0];
121                     ginsum += sir[1];
122                     binsum += sir[2];
123                 } else {
124                     routsum += sir[0];
125                     goutsum += sir[1];
126                     boutsum += sir[2];
127                 }
128                 if (i < hm) {
129                     yp += w;
130                 }
131             }
132             yi = x;
133             stackpointer = radius;
134             for (y = 0; y < h; y++) {
135                 pix[yi] = ( 0xff000000 & pix[yi] ) | ( dv[rsum] << 16 ) | ( dv[gsum] << 8 ) | dv[bsum];
136                 rsum -= routsum;
137                 gsum -= goutsum;
138                 bsum -= boutsum;
139                 stackstart = stackpointer - radius + div;
140                 sir = stack[stackstart % div];
141                 routsum -= sir[0];
142                 goutsum -= sir[1];
143                 boutsum -= sir[2];
144                 if (x == 0) {
145                     vmin[y] = Math.min(y + r1, hm) * w;
146                 }
147                 p = x + vmin[y];
148                 sir[0] = r[p];
149                 sir[1] = g[p];
150                 sir[2] = b[p];
151                 rinsum += sir[0];
152                 ginsum += sir[1];
153                 binsum += sir[2];
154                 rsum += rinsum;
155                 gsum += ginsum;
156                 bsum += binsum;
157                 stackpointer = (stackpointer + 1) % div;
158                 sir = stack[stackpointer];
159                 routsum += sir[0];
160                 goutsum += sir[1];
161                 boutsum += sir[2];
162                 rinsum -= sir[0];
163                 ginsum -= sir[1];
164                 binsum -= sir[2];
165                 yi += w;
166             }
167         }
168         bitmap.setPixels(pix, 0, w, 0, 0, w, h);
169         return (bitmap);
170     }
171 }

最后，別廢話了，趕緊自己去實現一個看看效果吧！順便提一下，有更快的模糊算法(最好使用C實現)實現記得聯系我：

QQ：811868948

E-Mail：halfmanhuang@gmail.com