仿qq阅读书籍背景高斯模糊后的透明线性淡化（毛玻璃）效果

最新推荐文章于 2021-05-26 05:57:23 发布
置顶 最新推荐文章于 2021-05-26 05:57:23 发布
阅读量644 收藏
点赞数 1
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhjin8510/article/details/87096478
版权

代码地址：https://github.com/zhangjinself/QQReadBg

用到的基础知识       

        一、两种模糊库

               工作中要用到高斯模糊的事的图片做背景图，在android下面实现高斯模糊，有两种方法，

                一种是谷歌自带的RenderScript 模糊，还有一种是FastBlur 实现高斯模糊， 这两种模糊方法，都是利用矩阵的原理进行模糊，这里也是引用了这种模糊，但是这种模糊后的效果没有经常去色处理，会导致模糊后的图片，颜色过重，如果背景图上有字，会显示的非常不清晰。

      二、图片像素存储的基本知识

               图片一般分为32位(ARGB_8888)和16位(ARGB_4444/ARGB565)。前面代表颜色通道，后面代表每个颜色所占的字节，

这里就是使用了对透明度的计算，来实现图片的线性淡化效果

    三、十六进制的基础计算

            在十六进制中，0x00ffffff，加1为0x01ffffff....0x09ffffff,0x0affffff,0x0bfffff,0x0cfffff,0x0dfffff,0x0effffff,0x0fffffff ,0x10ffffff......如果透明度累加不正常，也会显示会有线的感觉，达不到效果。

  具体实现

在对图片进行高斯模糊后，如果是颜色较重的图片比如黑色，做为背景色效果会非常不理想，并且设为图片全部透明也达不到效果看下图，上面的图片是原图，下面的图片是模糊后的图片，一共有四行文字，其中第一行是黑色的，但是黑色的文字明显看不到的。

模糊后的图片

 

我们看一看模糊后的图片,  可以看到，经过线性淡化后的图片，将会对图片的颜色统计去色处理，黑色的文字也可以显示出来

代码实现

       这里使用的glide的Transformation 进行处理, 首先获取图片的大小的所有像素点

    int w=newBitmap.getWidth();
    int h=newBitmap.getHeight();
    int[] pix = new int[w*h];
    newBitmap.getPixels(pix, 0, w, 0, 0, w, h);

然后对像素点进行循环，我是按100处理的， 这里使用了16的透明度每次加1，从上部模糊效果较重，下面模糊较以，实现线性模糊

 int val =pix.length/100;
        int a=0x00ffffff;
        for(int x=0;x<pix.length; x++){
            if(x>=val*99)
            {
                a=0x01ffffff;
            }else if(x>val*98)
            {
                a=0x02ffffff;
            }
            else if(x>val*97)
            {
                a=0x03ffffff;
            }

            else if(x>val*96)
            {
                a=0x04ffffff;
            }

            else if(x>val*95)
            {
                a=0x05ffffff;
            }

            else if(x>val*94)
            {
                a=0x06ffffff;
            }

            else if(x>val*93)
            {
                a=0x07ffffff;
            }

            else if(x>val*92)
            {
                a=0x08ffffff;
            }

            else if(x>val*91)
            {
                a=0x09ffffff;
            }
            else if(x>val*90)
            {
                a=0x0affffff;
            }
            else if(x>val*89)
            {
                a=0x0bffffff;
            }
            else if(x>val*88)
            {
                a=0x0cffffff;
            }
            else if(x>val*87)
            {
                a=0x0dffffff;
            }
            else if(x>val*86)
            {
                a=0x0effffff;
            }
            else if(x>val*85)
            {
                a=0x0fffffff;
            }
            else if(x>val*84)
            {
                a=0x10ffffff;
            }
            else if(x>val*83)
            {
                a=0x11ffffff;
            }
            else if(x>val*82)
            {
                a=0x12ffffff;
            }
            else if(x>val*81)
            {
                a=0x13ffffff;
            }
            else if(x>val*80)
            {
                a=0x14ffffff;
            }

            else if(x>val*79)
            {
                a=0x15ffffff;
            }
            else if(x>val*78)
            {
                a=0x16ffffff;
            }
            else if(x>val*77)
            {
                a=0x17ffffff;
            }
            else if(x>val*76)
            {
                a=0x18ffffff;
            }
            else if(x>val*75)
            {
                a=0x19ffffff;
            }
            else if(x>val*74)
            {
                a=0x1affffff;
            }
            else if(x>val*73)
            {
                a=0x1bffffff;
            }
            else if(x>val*72)
            {
                a=0x1cffffff;
            }
            else if(x>val*71)
            {
                a=0x1dffffff;
            }
            else if(x>val*70)
            {
                a=0x1effffff;
            }

            else if(x>val*69)
            {
                a=0x1fffffff;
            }
            else if(x>val*68)
            {
                a=0x20ffffff;
            }
            else if(x>val*67)
            {
                a=0x21ffffff;
            }
            else if(x>val*66)
            {
                a=0x22ffffff;
            }
            else if(x>val*65)
            {
                a=0x23ffffff;
            }
            else if(x>val*64)
            {
                a=0x24ffffff;
            }
            else if(x>val*63)
            {
                a=0x25ffffff;
            }
            else if(x>val*62)
            {
                a=0x26ffffff;
            }
            else if(x>val*61)
            {
                a=0x27ffffff;
            }
            else if(x>val*60)
            {
                a=0x28ffffff;
            }

            else if(x>val*59)
            {
                a=0x29ffffff;
            }
            else if(x>val*58)
            {
                a=0x2affffff;
            }
            else if(x>val*57)
            {
                a=0x2bffffff;
            }
            else if(x>val*56)
            {
                a=0x2cffffff;
            }
            else if(x>val*55)
            {
                a=0x2dffffff;
            }
            else if(x>val*54)
            {
                a=0x2effffff;
            }
            else if(x>val*53)
            {
                a=0x2fffffff;
            }
            else if(x>val*52)
            {
                a=0x30ffffff;
            }
            else if(x>val*51)
            {
                a=0x31ffffff;
            }
            else if(x>val*50)
            {
                a=0x32ffffff;
            }

            else if(x>val*49)
            {
                a=0x33ffffff;
            }
            else if(x>val*48)
            {
                a=0x34ffffff;
            }
            else if(x>val*47)
            {
                a=0x35ffffff;
            }
            else if(x>val*46)
            {
                a=0x36ffffff;
            }
            else if(x>val*45)
            {
                a=0x37ffffff;
            }
            else if(x>val*44)
            {
                a=0x38ffffff;
            }
            else if(x>val*43)
            {
                a=0x39ffffff;
            }
            else if(x>val*42)
            {
                a=0x3affffff;
            }
            else if(x>val*41)
            {
                a=0x3bffffff;
            }
            else if(x>val*40)
            {
                a=0x3cffffff;
            }

            else if(x>val*39)
            {
                a=0x3dffffff;
            }
            else if(x>val*38)
            {
                a=0x3effffff;
            }
            else if(x>val*37)
            {
                a=0x3fffffff;
            }
            else if(x>val*36)
            {
                a=0x40ffffff;
            }
            else if(x>val*35)
            {
                a=0x41ffffff;
            }
            else if(x>val*34)
            {
                a=0x42ffffff;
            }
            else if(x>val*33)
            {
                a=0x43ffffff;
            }
            else if(x>val*32)
            {
                a=0x44ffffff;
            }
            else if(x>val*31)
            {
                a=0x45ffffff;
            }
            else if(x>val*30)
            {
                a=0x46ffffff;
            }

            else if(x>val*29)
            {
                a=0x47ffffff;
            }
            else if(x>val*28)
            {
                a=0x48ffffff;
            }
            else if(x>val*27)
            {
                a=0x49ffffff;
            }
            else if(x>val*26)
            {
                a=0x4affffff;
            }
            else if(x>val*25)
            {
                a=0x4bffffff;
            }
            else if(x>val*24)
            {
                a=0x4cffffff;
            }
            else if(x>val*23)
            {
                a=0x4dffffff;
            }
            else if(x>val*22)
            {
                a=0x4effffff;
            }
            else if(x>val*21)
            {
                a=0x4fffffff;
            }
            else if(x>val*20)
            {
                a=0x50ffffff;
            }

            else if(x>val*19)
            {
                a=0x51ffffff;
            }
            else if(x>val*18)
            {
                a=0x52ffffff;
            }
            else if(x>val*17)
            {
                a=0x53ffffff;
            }
            else if(x>val*16)
            {
                a=0x54ffffff;
            }
            else if(x>val*15)
            {
                a=0x55ffffff;
            }
            else if(x>val*14)
            {
                a=0x56ffffff;
            }
            else if(x>val*13)
            {
                a=0x57ffffff;
            }
            else if(x>val*12)
            {
                a=0x58ffffff;
            }
            else if(x>val*11)
            {
                a=0x59ffffff;
            }
            else if(x>val*10)
            {
                a=0x5affffff;
            }

            else if(x>=val*9)
            {
                a=0x5bffffff;
            }
            else if(x>=val*8)
            {
                a=0x5cffffff;
            }
            else if(x>=val*7)
            {
                a=0x5dffffff;
            }
            else if(x>=val*6)
            {
                a=0x5effffff;
            }
            else if(x>=val*5)
            {
                a=0x5fffffff;
            }
            else if(x>=val*4)
            {
                a=0x60ffffff;
            }
            else if(x>=val*3)
            {
                a=0x61ffffff;
            }
            else if(x>=val*2)
            {
                a=0x62ffffff;
            }
            else if(x>=val*1)
            {
                a=0x63ffffff;
            }
            else if(x>=val*0)
            {
                a=0x64ffffff;
            }
            pix[x]=pix[x] & a;
        }

        newBitmap.setPixels(pix,0, w, 0, 0, w, h);

到这里就结束了，这是java版的，如果是批量处理，建议还是使用jni处理，这个以后实现了再发表

 

参考：:https://blog.csdn.net/w855227/article/details/79359435

快乐前进
关注
专栏目录
【原生JS和canvans实现图片的高斯模糊（qq音乐图片背景效果）】
jsmylo的博客
12-21 1465
1.基本准备（图片），放到img文件夹下面（我比较喜欢叫img）,自己随意。 2.html基本页面。基本css。需要指定元素的id或者类名，以便后续获取dom元素。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title&gt
利用Android原生RenderScript实现仿网易云、QQ音乐播放界面高斯模糊效果
qq_20613149的博客
09-02 1302
国际惯例先上图： QQ音乐效果图： Demo效果图： 高斯模糊工具类： /** * <pre> * author : Hansel * e-mail : oysqloveyou@163.com * desc : 毛玻璃工具类 * version: 1.0 * </pre> */ public class BlurUtil...
ios-仿QQ阅读、微信阅读的弹出编辑器.zip
07-11
source code address: https://github.com/JRJian/JJPopoverview
仿QQ阅读UI布局的搭建之感想
wuyinlei的博客
07-10 1724
仿QQ阅读UI布局
高斯模糊效果实现方案及性能对比
热门推荐
huli870715的专栏
09-18 4万+
高斯模糊实现方案探究 现在越来越多的app在背景图中使用高斯模糊效果，如yahoo天气，效果做得很炫。 我们5.2个性资料卡的标签模版也需要使用高斯模糊，这里就用一个demo来谈谈它的不同实现方式及各自的优缺点。 1. RenderScript 谈到高斯模糊，第一个想到的就是RenderScript。RenderScript是由Android3.0引入，用来在Android上编写高性能代码的
Android 实现模糊半透明效果(水玻璃特效)
06-17
在布局页面加载时根据背景变换实现模糊和半透明的效果
Android实现图片毛玻璃背景效果
01-21
本文实例为大家分享了Android实现毛玻璃背景效果的具体代码，供大家参考，具体内容如下 import android.content.Context; import android.graphics.Bitmap; /** * Created by abel.zhang on 2016/8/9. * 图片的毛玻璃效果 */ public class GsdFastBlur { /** * * @param context * @param sentBitmap * @param radius 12 模糊程度 * @return */ public st
Android高仿IOS动态高斯模糊背景
01-03
提供的图片文件可能包括示例效果展示，如"timg.jpg"、"QQ图片20180103150702.jpg"、"QQ图片20180103150706.jpg"，以及可能的源代码或库文件"高仿IOS动态高斯模糊背景"。通过分析这些图片，开发者可以了解预期的视觉...
qqSpaceFrame:高仿QQ空间侧滑菜单高斯模糊效果
06-06
【qqSpaceFrame】是一个基于Objective-C开发的iOS项目，其主要目标是实现一个与QQ空间相似的侧滑菜单，并且带有高斯模糊效果。在iOS应用设计中，侧滑菜单通常用于提供用户导航，显示主界面之外的附加功能或者设置...
Android 自定义设置图片模糊度、高斯模糊效果
qq_27372581的博客
01-16 4360
最近项目中有需要到图片的“毛玻璃”模糊效果，网上找一下，千篇一律。高谈阔论扯淡的多，真正有用的没几个！ 借助此文，做修改之后，实现效果！我只是个搬运工，在此表示感谢！ http://gqdy365.iteye.com/blog/2193913 点击打开链接 淡不多扯，直接上代码： MainActivity: public class MainActivity extends Acti
Android 局部毛玻璃透明效果
07-07
Eclipse 工程Demo，用一个BlurringView自定义控件作为毛玻璃蒙板，对后面的背景进行局部模糊。
Android毛玻璃背景效果Demo
12-29
Android毛玻璃背景效果，方法封装，实现简单，代码里有详细注释，有需要的朋友可以去下载！
Android毛玻璃背景效果简单实现代码
08-29
主要介绍了Android毛玻璃背景效果简单实现代码,需要的朋友可以参考下
android 玻璃背景,Android 弹窗毛玻璃背景实践
weixin_39612332的博客
05-26 527
Android 弹窗毛玻璃背景实践需求: 点击FloatingActionButton弹出弹层，弹层底部有多个图标可选，每一个图标都是一个功能入口，背景采用毛玻璃模糊效果。记录一下这个需求的思考和实现过程。查找Android原生API做法在Android API里面，有个FLAG_BLUR_BEHIND用于模糊背景的FLAG，尝试一下使用它来做Dialog的背景模糊。 代码如下:final Dia...
整理Glide方法使用含义（毛玻璃效果，实现圆角等）
黄孝果的博客
11-15 5063
现在项目中一般使用Glide进行图片加载，于是找一下他的各个方法的使用，方便使用而已。添加依赖： compile 'com.github.bumptech.glide:glide:3.7.0'基本使用：Glide .with(this) .load(url) .into(imageView);强大的Glide.with() with(Context context).
Android毛玻璃背景效果
且听风吟
12-29 5464
现在比较流行的毛玻璃效果，实现方法简单，代码里面有注释，很容易看懂。 有需要的朋友可以去这里下载：http://download.csdn.net/detail/aiyuan0204/8310693
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值