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:[email protected]

Android UI效果实现——滑动模糊渐变效果实现

时间: 2024-10-11 09:20:33

Android UI效果实现——滑动模糊渐变效果实现的相关文章

Android UI效果实现——Activity滑动退出效果

更新说明: 1.在QQ网友北京-旭的提醒下,在SlideFrame的initilize方法中添加了focusable.focusableInTouch.clickable的状态设置,否则会导致部分情况下无法滑动,感谢! 一.使用说明 使用方法很简单,只有一个类HorizontalActivity,继承自FragmentActivity类,实现了contentView的滑动事件触发和动画效果,要在自己的代码里实现,方法两种: 1.如果对Activity没特殊要求,直接继承HorizontalAct

android UI效果相关-ListView(一)

方法一 通过反射: 代码:         Class clsClass = listView.getClass().getSuperclass();         if(clsClass == null){             Log.d("tag", "null");         }else {             Log.d("tag", "not null");             if(clsCla

Android UI设计之&lt;十&gt;自定义ListView,实现QQ空间阻尼下拉刷新和渐变菜单栏效果

转载请注明出处:http://blog.csdn.net/llew2011/article/details/51559694 好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客是在2014年写的:Android UI设计之<七>自定义Dialog,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效

50个Android开发人员必备UI效果源码[转载]

50个Android开发人员必备UI效果源码[转载] http://blog.csdn.net/qq1059458376/article/details/8145497 Android 仿微信之主页面实现篇Android 仿微信之界面导航篇Android 高仿QQ 好友分组列表Android 高仿QQ 界面滑动效果Android 高仿QQ 登陆界面Android 对Path的旋转效果的拓展Android高仿360安全卫士布局源码Android SlidingDrawer 滑动抽屉效果Androi

Android UI - 实现广告Banner轮播效果

Android UI - 实现广告Banner轮播效果 前言 本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比较常见,一些视频类应用就经常有,就拿360影视大全来举例吧: 用红框框住的那个效果就是小巫今天要分享的,先来思考一下会用到什么控件?有什么用户体验? 控件我们可能一下子就可以想到的自然是ViewPager,没错!用到的就是ViewPager,那么它会有什么用户体验呢,它可能有以下几个体验: 1. 间隔不停的切换图片,指示器也跟着变 2. 点击图片可以跳转到指定的页面

Android三种左右滑动效果 手势识别

Android三种左右滑动效果 手势识别(转) 手势识别 1.onCreate中添加GestureDetector mGestureDetector; //监听手势事件 mGestureDetector = new GestureDetector(this, onGestureListener); 2.//实现处理事件 OnGestureListener onGestureListener = new OnGestureListener() { //添加未实现的方法 }; 3.重写onTouch

Android UI组件之EditText 实现网站注册效果的校验

时间过得太快,还没有什么感觉就到周末了,人生五十载,如梦亦如幻.不过我还没那么老.前两天曾说过,如果需要实现输入IP的功能,那么我们可以整一个自定义控件,然后对他进行事件监听,巴拉巴拉一大堆,好不容易做完了.后来想想,这是为了符合我们平常在PC上的习惯而去自定义的.那么如果只是单纯的为了输入一个IP地址,然后得到结果,不想去这么折腾,有没有什么好办法呢? 很显然是有的,那就今天就来看看Android最常用的组件之一的EditText,虽然之前用的也是EditText,但是侧重点其实是自定义控件,

巧用Drawable 实现Android UI 元素间距效果

源文地址: 巧用Drawable 实现Android UI 元素间距效果 在大部分的移动UI或者Web UI都是基于网格概念而设计的.这种网格一般都是有一些对其的方块组成.然后它们组合成为一个块. 使用网格这种设计原则能够有助于对齐UI元素,提升UI的一致性,同一时候还能让用户更加easy的获取UI上面包括的内容. 简而言之.网格是一个相当的强大的设计工具. 开发人员在使用网格设计原则的时候须要在UI 元素之间加入一些额外的间距,比方padding.margin或者spacing(依据你的设计方

我收集了多个android界面UI效果,深感大哥们的分享啊

初到oschina,看到很多大哥们分享了很好好的代码,近段时间,我收集了多个android界面UI效果,深感大哥们的分享啊.后来我将这些界面效果整合拢来,形成一个大的特效集合,一来为了查看方便,二来也为拷贝复制便捷.今日,将其共享出来,也算是为资源共享出一分力嘛. 直接上效果图: 可以看到上图中几个效果图,最上面九宫格图.左边一个是图书翻页效果图,都是比较经典的UI效果,当然还有很多,这些都是来源于oschina上的分享. 不过想说明一下,有部分地方小弟私自改动了,还请原作者原谅.例如,水波纹的