这几天项目中需要模仿一下iOS版本的微博菜单弹出界面，如下图：
用微博的同学都知道这个效果吧，这篇文章先实现模糊效果，进入、退出动画后面文章分析；
一、说一下实现思路，很简单的：
1、截图：就是获取我们app得截图
获取我们Activity得根view即DecorView，关于DecorView，sdk里面是这么说明的：
Retrieve the top-level window decor view (containing the standard window frame/decorations and the client's content inside of that), which can be added as a window to the window manager.
就是说获取最顶层的window，可以添加到window manager里面；
拿到view之后可以调用view的getDrawingCache方法获取bitmap截图；
2、对图片做高斯模糊；
高斯模糊在Photoshop里面用的比较多，可以用来去痘痘。
大致原理是：对指定像素和其周围像素进行加权平均来得到最终结果，使用高斯分布作为滤波器。
这儿可以了解详细的算法原理：http://www.ruanyifeng.com/blog/2012/11/gaussian_blur.html
二、代码实现：
代码比较简单，我自己加了注释贴出来了：
privatevoidapplyBlur() {
View view = getWindow().getDecorView();
view.setDrawingCacheEnabled(true);
view.buildDrawingCache(true);
/**
* 获取当前窗口快照，相当于截屏
*/
Bitmap bmp1 = view.getDrawingCache();
intheight = getOtherHeight();
/**
* 除去状态栏和标题栏
*/
Bitmap bmp2 = Bitmap.createBitmap(bmp1,0, height,bmp1.getWidth(), bmp1.getHeight() - height);
blur(bmp2, text);
}
@SuppressLint("NewApi")
privatevoidblur(Bitmap bkg, View view) {
longstartMs = System.currentTimeMillis();
floatscaleFactor =8;//图片缩放比例；
floatradius =20;//模糊程度
Bitmap overlay = Bitmap.createBitmap(
(int) (view.getMeasuredWidth() / scaleFactor),
(int) (view.getMeasuredHeight() / scaleFactor),
Bitmap.Config.ARGB_8888);
Canvas canvas =newCanvas(overlay);
canvas.translate(-view.getLeft() / scaleFactor, -view.getTop()/ scaleFactor);
canvas.scale(1/ scaleFactor,1/ scaleFactor);
Paint paint =newPaint();
paint.setFlags(Paint.FILTER_BITMAP_FLAG);
canvas.drawBitmap(bkg,0,0, paint);
overlay = FastBlur.doBlur(overlay, (int) radius,true);
view.setBackground(newBitmapDrawable(getResources(), overlay));
/**
* 打印高斯模糊处理时间，如果时间大约16ms，用户就能感到到卡顿，时间越长卡顿越明显，如果对模糊完图片要求不高，可是将scaleFactor设置大一些。
*/
Log.i("jerome","blur time:"+ (System.currentTimeMillis() - startMs));
}
/**
* 获取系统状态栏和软件标题栏，部分软件没有标题栏，看自己软件的配置；
* @return
*/
privateintgetOtherHeight() {
Rect frame =newRect();
getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
intstatusBarHeight = frame.top;
intcontentTop = getWindow().findViewById(Window.ID_ANDROID_CONTENT).getTop();
inttitleBarHeight = contentTop - statusBarHeight;
returnstatusBarHeight + titleBarHeight;
}
我这里用了外国开源项目中的一个Java算法，地址：https://github.com/paveldudka/blurring
packagecom.jerome.popdemo;
importandroid.graphics.Bitmap;
/**
* Created by paveld on 3/6/14.
*/
publicclassFastBlur {
publicstaticBitmap doBlur(Bitmap sentBitmap,intradius,
booleancanReuseInBitmap) {
Bitmap bitmap;
if(canReuseInBitmap) {
bitmap = sentBitmap;
}else{
bitmap = sentBitmap.copy(sentBitmap.getConfig(),true);
}
if(radius <1) {
return(null);
}
intw = bitmap.getWidth();
inth = bitmap.getHeight();
int[] pix =newint[w * h];
bitmap.getPixels(pix,0, w,0,0, w, h);
intwm = w -1;
inthm = h -1;
intwh = w * h;
intdiv = radius + radius +1;
intr[] =newint[wh];
intg[] =newint[wh];
intb[] =newint[wh];
intrsum, gsum, bsum, x, y, i, p, yp, yi, yw;
intvmin[] =newint[Math.max(w, h)];
intdivsum = (div +1) >>1;
divsum *= divsum;
intdv[] =newint[256* divsum];
for(i =0; i <256* divsum; i++) {
dv[i] = (i / divsum);
}
yw = yi =0;
int[][] stack =newint[div][3];
intstackpointer;
intstackstart;
int[] sir;
intrbs;
intr1 = radius +1;
introutsum, goutsum, boutsum;
intrinsum, 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);
}
}
如果用C/C++实现jni调用，效果会高一些，可以参考：https://github.com/qiujuer/ImageBlurring/blob/master/README-ZH.md
/*************************************************
Copyright: Copyright QIUJUER 2013.
Author: Qiujuer
Date: 2014-04-18
Description:实现图片模糊处理
**************************************************/
#include
#define ABS(a) ((a)<(0)?(-a):(a))
#define MAX(a,b) ((a)>(b)?(a):(b))
#define MIN(a,b) ((a)<(b)?(a):(b))
/*************************************************
Function: StackBlur(堆栈模糊)
Description: 使用堆栈方式进行图片像素模糊处理
Calls: malloc
Table Accessed: NULL
Table Updated: NULL
Input: 像素点集合，图片宽，图片高，模糊半径
Output: 返回模糊后的像素点集合
Return: 返回模糊后的像素点集合
Others: NULL
*************************************************/
staticint* StackBlur(int* pix,intw,inth,intradius) {
intwm = w -1;
inthm = h -1;
intwh = w * h;
intdiv = radius + radius +1;
int*r = (int*)malloc(wh * sizeof(int));
int*g = (int*)malloc(wh * sizeof(int));
int*b = (int*)malloc(wh * sizeof(int));
intrsum, gsum, bsum, x, y, i, p, yp, yi, yw;
int*vmin = (int*)malloc(MAX(w,h) * sizeof(int));
intdivsum = (div +1) >>1;
divsum *= divsum;
int*dv = (int*)malloc(256* divsum * sizeof(int));
for(i =0; i <256* divsum; i++) {
dv[i] = (i / divsum);
}
yw = yi =0;
int(*stack)[3] = (int(*)[3])malloc(div *3* sizeof(int));
intstackpointer;
intstackstart;
int*sir;
intrbs;
intr1 = radius +1;
introutsum, goutsum, boutsum;
intrinsum, 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 + (MIN(wm, MAX(i,0)))];
sir = stack[i + radius];
sir[0] = (p &0xff0000) >>16;
sir[1] = (p &0x00ff00) >>8;
sir[2] = (p &0x0000ff);
rbs = r1 - 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] = 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 = MAX(0, yp) + x;
sir = stack[i + radius];
sir[0] = r[yi];
sir[1] = g[yi];
sir[2] = b[yi];
rbs = r1 - 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] = 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;
}
}
free(r);
free(g);
free(b);
free(vmin);
free(dv);
free(stack);
return(pix);
}
最后来一张屌丝做demo专业效果图：
技术交流QQ群：364595326
