原文:http://gqdy365.iteye.com/blog/2193913
这几天项目中需要模仿一下iOS版本的微博菜单弹出界面,如下图:
用微博的同学都知道这个效果吧,这篇文章先实现模糊效果,进入、退出动画后面文章分析;
一、说一下实现思路,很简单的:
1、截图:就是获取我们app得截图
获取我们Activity得根view即DecorView,关于DecorView,sdk里面是这么说明的:
就是说获取最顶层的window,可以添加到window manager里面;
拿到view之后可以调用view的getDrawingCache方法获取bitmap截图;
2、对图片做高斯模糊;
高斯模糊在Photoshop里面用的比较多,可以用来去痘痘。
大致原理是:对指定像素和其周围像素进行加权平均来得到最终结果,使用高斯分布作为滤波器。
这儿可以了解详细的算法原理:http://www.ruanyifeng.com/blog/2012/11/gaussian_blur.html
二、代码实现:
代码比较简单,我自己加了注释贴出来了:
我这里用了外国开源项目中的一个Java算法,地址:https://github.com/paveldudka/blurring
如果用C/C++实现jni调用,效果会高一些,可以参考:https://github.com/qiujuer/ImageBlurring/blob/master/README-ZH.md
最后来一张屌丝做demo专业效果图:
用微博的同学都知道这个效果吧,这篇文章先实现模糊效果,进入、退出动画后面文章分析;
一、说一下实现思路,很简单的:
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
二、代码实现:
代码比较简单,我自己加了注释贴出来了:
- private void applyBlur() {
- View view = getWindow().getDecorView();
- view.setDrawingCacheEnabled(true);
- view.buildDrawingCache(true);
- /**
- * 获取当前窗口快照,相当于截屏
- */
- Bitmap bmp1 = view.getDrawingCache();
- int height = getOtherHeight();
- /**
- * 除去状态栏和标题栏
- */
- Bitmap bmp2 = Bitmap.createBitmap(bmp1, 0, height,bmp1.getWidth(), bmp1.getHeight() - height);
- blur(bmp2, text);
- }
- @SuppressLint("NewApi")
- private void blur(Bitmap bkg, View view) {
- long startMs = System.currentTimeMillis();
- float scaleFactor = 8;//图片缩放比例;
- float radius = 20;//模糊程度
- Bitmap overlay = Bitmap.createBitmap(
- (int) (view.getMeasuredWidth() / scaleFactor),
- (int) (view.getMeasuredHeight() / scaleFactor),
- Bitmap.Config.ARGB_8888);
- Canvas canvas = new Canvas(overlay);
- canvas.translate(-view.getLeft() / scaleFactor, -view.getTop()/ scaleFactor);
- canvas.scale(1 / scaleFactor, 1 / scaleFactor);
- Paint paint = new Paint();
- paint.setFlags(Paint.FILTER_BITMAP_FLAG);
- canvas.drawBitmap(bkg, 0, 0, paint);
- overlay = FastBlur.doBlur(overlay, (int) radius, true);
- view.setBackground(new BitmapDrawable(getResources(), overlay));
- /**
- * 打印高斯模糊处理时间,如果时间大约16ms,用户就能感到到卡顿,时间越长卡顿越明显,如果对模糊完图片要求不高,可是将scaleFactor设置大一些。
- */
- Log.i("jerome", "blur time:" + (System.currentTimeMillis() - startMs));
- }
- /**
- * 获取系统状态栏和软件标题栏,部分软件没有标题栏,看自己软件的配置;
- * @return
- */
- private int getOtherHeight() {
- Rect frame = new Rect();
- getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
- int statusBarHeight = frame.top;
- int contentTop = getWindow().findViewById(Window.ID_ANDROID_CONTENT).getTop();
- int titleBarHeight = contentTop - statusBarHeight;
- return statusBarHeight + titleBarHeight;
- }
我这里用了外国开源项目中的一个Java算法,地址:https://github.com/paveldudka/blurring
- package com.jerome.popdemo;
- import android.graphics.Bitmap;
- /**
- * Created by paveld on 3/6/14.
- */
- public class FastBlur {
- public static Bitmap doBlur(Bitmap sentBitmap, int radius,
- boolean canReuseInBitmap) {
- 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);
- }
- }
如果用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<malloc.h>
- #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
- *************************************************/
- static int* StackBlur(int* pix, int w, int h, int radius) {
- int wm = w - 1;
- int hm = h - 1;
- int wh = w * h;
- int div = radius + radius + 1;
- int *r = (int *)malloc(wh * sizeof(int));
- int *g = (int *)malloc(wh * sizeof(int));
- int *b = (int *)malloc(wh * sizeof(int));
- int rsum, gsum, bsum, x, y, i, p, yp, yi, yw;
- int *vmin = (int *)malloc(MAX(w,h) * sizeof(int));
- int divsum = (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));
- 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 + (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专业效果图: