2. 程式人生 > >一分鐘實現動態模糊效果(毛玻璃)

一分鐘實現動態模糊效果(毛玻璃)

阿新 • • 發佈：2019-02-16

本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出

本文轉載自 http://wl9739.github.io/   湫水長天的部落格

現在，越來越多的App裡面使用了模糊效果，我尤其喜歡雅虎天氣的介面，上滑的時候背景圖片會跟著移動，最重要的是背景圖片會根據手指上下移動的距離來進行不同程度的模糊，感覺甚為驚奇，畢竟大家都知道，在Android平臺上進行模糊渲染是一個相當耗CPU也相當耗時的操作，一旦處理不好，卡頓是在所難免的。雖然我並不知道雅虎天氣是怎麼做出這種效果的，但是簡單的模仿一下的話，還是能做到的。

一般來說，考慮到效率，渲染一張圖片最好的方法是使用OpenGL，其次是使用C++／C，使用Java程式碼是最慢的。但是Android推出RenderScript之後，我們就有了新的選擇，測試表明，使用RenderScript的渲染效率和使用C/C++不相上下，但是使用RenderScript卻比使用JNI簡單地多！同時，Android團隊提供了RenderScript

的支援庫，使得在低版本的Android平臺上也能使用。

不過在使用RenderScript之前，對於模糊一張圖片，需要注意的是，我們應該儘量不要使用原尺寸解析度的圖片，最好將圖片縮小比例，這小渲染的效率要高一些。

動態模糊的實現

如何使用RenderScript來模糊一張圖片呢？廢話不多說，先上核心程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

public
 
 class BlurBitmap {
    /**
     * 圖片縮放比例
     */
    private static final float BITMAP_SCALE = 0.4f;
    /**
     * 最大模糊度(在0.0到25.0之間)
     */
    private static final float BLUR_RADIUS = 25f;

    /**
     * 模糊圖片的具體方法
     *
     * @param context   上下文物件
     * @param image     需要模糊的圖片
     * @return          模糊處理後的圖片
 

     */
    public static Bitmap blur(Context context, Bitmap image) {
        // 計算圖片縮小後的長寬
        int width = Math.round(image.getWidth() * BITMAP_SCALE);
        int height = Math.round(image.getHeight() * BITMAP_SCALE);

        // 將縮小後的圖片做為預渲染的圖片。
        Bitmap inputBitmap = Bitmap.createScaledBitmap(image, width, height, false);
        // 建立一張渲染後的輸出圖片。
        Bitmap outputBitmap = Bitmap.createBitmap(inputBitmap);

        // 建立RenderScript核心物件
        RenderScript rs = RenderScript.create(context);
        // 建立一個模糊效果的RenderScript的工具物件
        ScriptIntrinsicBlur blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));

        // 由於RenderScript並沒有使用VM來分配記憶體,所以需要使用Allocation類來建立和分配記憶體空間。
        // 建立Allocation物件的時候其實記憶體是空的,需要使用copyTo()將資料填充進去。
        Allocation tmpIn = Allocation.createFromBitmap(rs, inputBitmap);
        Allocation tmpOut = Allocation.createFromBitmap(rs, outputBitmap);

        // 設定渲染的模糊程度, 25f是最大模糊度
        blurScript.setRadius(BLUR_RADIUS);
        // 設定blurScript物件的輸入記憶體
        blurScript.setInput(tmpIn);
        // 將輸出資料儲存到輸出記憶體中
        blurScript.forEach(tmpOut);

        // 將資料填充到Allocation中
        tmpOut.copyTo(outputBitmap);

        return outputBitmap;
    }
}

完成上面的程式碼後，需要在app的gradle檔案中新增如下的支援：

1
2
3
4
5

 defaultConfig {
    ......
    renderscriptTargetApi 19
    renderscriptSupportModeEnabled true
}

程式碼做了簡單的註釋以幫助理解，如果需要詳細瞭解，可以查閱官方文件：RenderScript

然後，我們可以看一下模糊前和模糊後的效果對比：

duibi.jpg-94kB

將圖片模糊後，接下來要考慮的是怎麼實現動態模糊效，有一點需要注意的是，即使我們使用了RenderScript這種高效的渲染方式，但是在實際測試中，渲染一張500*700解析度的PNG格式圖片，在我的Pro 6手機上，仍然需要50ms左右的時間，顯然如果使用上面的程式碼進行實時渲染的話，會造成介面嚴重的卡頓。

既然實時渲染這條路走不通，那麼就需要我們另闢蹊徑了，我這裡可以提供一種方法：先將圖片進行最大程度的模糊處理，再將原圖放置在模糊後的圖片上面，通過不斷改變原圖的透明度(Alpha值）來實現動態模糊效果。

簡單的程式碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

public class MainActivity extends AppCompatActivity {

    /**
     * 原始圖片控制元件
     */
    private ImageView mOriginImg;

    /**
     * 模糊後的圖片控制元件
     */
    private ImageView mBluredImage;

    /**
     * 進度條SeekBar
     */
    private SeekBar mSeekBar;

    /**
     * 顯示進度的文字
     */
    private TextView mProgressTv;

    /**
     * 透明度
     */
    private int mAlpha;

    /**
     * 原始圖片
     */
    private Bitmap mTempBitmap;

    /**
     * 模糊後的圖片
     */
    private Bitmap mFinalBitmap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 初始化檢視
        initViews();

        // 獲取圖片
        mTempBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.dayu);
        mFinalBitmap = BlurBitmap.blur(this, mTempBitmap);

        // 填充模糊後的影象和原圖
        mBluredImage.setImageBitmap(mFinalBitmap);
        mOriginImg.setImageBitmap(mTempBitmap);

        // 處理seekbar滑動事件
        setSeekBar();
    }

    /**
     * 初始化檢視
     */
    private void initViews() {
        mBluredImage = (ImageView) findViewById(R.id.activity_main_blured_img);
        mOriginImg = (ImageView) findViewById(R.id.activity_main_origin_img);
        mSeekBar = (SeekBar) findViewById(R.id.activity_main_seekbar);
        mProgressTv = (TextView) findViewById(R.id.activity_main_progress_tv);
    }

    /**
     * 處理seekbar滑動事件
     */
    private void setSeekBar() {
        mSeekBar.setMax(100);
        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                mAlpha = progress;
                mOriginImg.setAlpha((int) (255 - mAlpha * 2.55));
                mProgressTv.setText(String.valueOf(mAlpha));
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}

xml佈局檔案程式碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp">

        <ImageView
            android:id="@+id/activity_main_blured_img"
            android:scaleType="centerCrop"
            android:src="@drawable/dayu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <ImageView
            android:id="@+id/activity_main_origin_img"
            android:scaleType="centerCrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </FrameLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="80dp">

        <SeekBar
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:id="@+id/activity_main_seekbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"/>

        <TextView
            android:id="@+id/activity_main_progress_tv"
            android:text="0"
            android:textSize="24sp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

</LinearLayout>

效果如下：

blurdemo.gif-3200.7kB

怎麼樣？是不是很簡單的樣子？只需要呼叫模糊處理方法，並在SeekBar的滑動監聽裡面呼叫原影象的setAlpha()方法，來實現動態模糊效果。

你以為這樣就完了？不不不，我們的目的並不是這麼單純，哦，不對，並不是這麼簡單。還記得文章開頭的時候說了嗎？我們的終極目的是要簡單地模仿一下雅虎天氣的介面效果。

仿雅虎天氣介面

有了上面的基礎，就可以很容易地模仿雅虎天氣的介面效果。簡單來說，在上面製作出的效果基礎上，有以下兩點需要注意的地方：

  • 需要要監聽滑動事件，然後再將背景圖片呼叫setTop()方法，將圖片向上平移一段距離。
  • 要向上平移圖片，還需要手動增加圖片的高度，不然圖片向上平移後，底部就會有留白。設定圖片高度的核心程式碼如下：
1
2
3
4
5
6
7
8
9
10
11
12

WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
Point point = new Point();
display.getSize(point);
// 獲取到ImageView的高度
int height = point.y;
ViewGroup.LayoutParams params = imageView.getLayoutParams();
params.width = ViewGroup.LayoutParams.MATCH_PARENT;
// 將ImageView的高度增加100
params.height = height + 100;
// 應用更改設定
imageView.requestLayout();

完成上面兩點的內容後，基本就可以模仿出雅虎天氣的首頁了。

結合第一個例子的demo，效果如下：

demo.gif-4725.3kB

相關程式碼已上傳至Github：BlurredView，歡迎Star，Fork。

本著不重複造輪子的原則，我將模糊影象的程式碼上傳至JCenter，大家只需要在專案中新增Gradle引用就行了，具體使用方法請參考上面Github倉庫的ReadMe。

相關推薦

一分鐘實現動態模糊效果(毛玻璃)

本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 本文轉載自 http://wl9739.github.io/   湫水長天的部落格 現在，越來越多的App裡面使用了模糊效果，我尤其喜歡雅虎天氣的介面，上滑的時候背景圖片會跟著移動，最重要的是背景圖片

Android快速實現動態模糊效果

寫在前面現在，越來越多的App裡面使用了模糊效果，這種模糊效果稱之為高斯模糊。大家都知道，在Android平臺上進行模糊渲染是一個相當耗CPU也相當耗時的操作，一旦處理不好，卡頓是在所難免的。一般來說，考慮到效率，渲染一張圖片最好的方法是使用OpenGL，其次是使用C++/C

SVG 實現動態模糊動畫效果

今天我們將向大家展示如何製作SVG動態模糊效果，並將其應用於HTML元素的常規JS或CSS動畫。 動態模糊是一種廣泛使用於動態影像和動畫的技術，它能使動作看起來更加平滑自然。 線上演示原始碼下載 動態模糊是靜止影象或一系列影象（如電影或動畫）中快速移動物體的明顯影象拖尾。當記錄的影象在單幀記錄期間發生變化

Shine.js實現動態陰影效果

b2c ava .net fun text 動態 cti element gravity Shine.js 是一個用於實現美麗陰影的 JS 庫。 特性 1、可動態旋轉光的位置，投影出不同的陰影效果　　 2、可定制的陰影，　　 3、沒有庫依賴關系,AMD兼容使

ShaderLab學習小結（十一）貼圖模糊效果

世界坐標 導數 隨著 bsh 物體 建立 51cto ack pda 建立cube，賦上貼圖，camera不動，旋轉cube，正面向著camera的貼圖清晰，或者說法線方向與camera的視方向平行的清晰，成90度的最為模糊，其它角度的在最清晰和最模糊之間最清晰此時其他幾個

jq實現動態粒子效果

tex ret padding 粒子 proto scrip rip [] 3D 在線上看到別人做的動態粒子，哇，太炫了，我也來試一試。 <!DOCTYPE html><html> <head> <meta charset="UT

Android下拉重新整理完全解析 教你如何一分鐘實現下拉重新整理功能

                最近專案中需要用到ListView下拉重新整理的功能，一開始想圖省事，在網上直接找一個現成的，可是嘗試了網上多個版本的下拉重新整理之後發現效果都不怎麼理想。有些是因為功能不完整或有Bug，有些是因為使用起來太複雜，十全十美的還真沒找到。因此我也是放棄了在網上找現成程式碼的想法，

一分鐘實現內網穿透（ngrok伺服器搭建）

簡單來說內網穿透的目的是：讓外網能訪問你本地的應用，例如在外網開啟你本地http://127.0.0.1指向的Web站點。 最近公司的花生殼到期了，要續費，發現價格一直在漲，都是5年以上的老使用者，旗艦版都沒有實現內網完全穿透，打算自己動手替換這個服務，中間走

Axure RP 7原型工具通過中繼器實現動態表格效果

一、新增控制元件 1、新增兩個文字控制元件分別為“姓名”、“Email” 2、新增兩個文字框控制元件分別命名為"inputTextName"、“inputEmailText” 3、新增一個按鈕控制元件“提交” 4、新增一個表格空間，只要頭，將頭下面的單元格刪掉 5、新增一箇

IOS 使用CoreImage實現圖片模糊效果

//原始圖片 UIImage*image = [UIImage imageNamed:@"sourceImage.jpg"]; /*.....coreImage部分....*/ //CIImage（圖片輸入源類似於UIImage） C

RecyclerView的簡單使用（一）———— 實現各種佈局效果

文章內容   本文簡單介紹了RecyclerView的基本使用方式，引入了控制RecyclerView佈局的LayoutManager類， 並且實現了RecyclerView的各種佈局效果。 預覽效果圖 準備工作 

Qt 之 QQ系統表情—實現動態顯示效果

簡述 在Qt 之 QQ系統表情（五） 中 我們實現了自定義系統表情視窗，這一篇將簡單介紹如何實現QQ聊天介面中小表情視窗切換至正常表情視窗的動畫效果。 先看看QQ的效果： 當滑鼠懸浮在表情按鈕之上顯示小表情視窗，點選動態顯示正常表情視窗，再點選隱

Android雙向滑動選單完全解析，教你如何一分鐘實現雙向滑動特效

記得在很早之前，我寫了一篇關於Android滑動選單的文章，其中有一個朋友在評論中留言，希望我可以幫他將這個滑動選單改成雙向滑動的方式。當時也沒想花太多時間，簡單修改了一下就發給了他，結果沒想到後來卻有一大批的朋友都來問我要這份雙向滑動選單的程式碼。由於這份程式碼寫得很不用心

一分鐘實現多檔案斷點續傳——斷點續傳框架

本人先前的部落格有對多檔案分段斷點續傳的功能進行詳細的介紹，如果你有興趣可以先閱讀Android多檔案斷點續傳（一）——資料封裝以及介面實現。本人在先前的基礎上對程式碼進行了封裝，本帖主要介紹如何整合封裝好的框架快速實現多檔案分段斷點續傳功能。 先看效果圖

CSS實現背景模糊效果（高斯模糊）

px值越大，越模糊，可以按照不同的類名給不同的模糊值，背景看起來會更好看一點 重點實現為： -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-

Openlayers4中實現動態線效果

概述：本文講述如何結合canvas在Openlayers4中實現動態線的效果。效果：程式碼：1、move-line擴充套件(function (global, factory) { typeof exports === 'object' && type

【菜鳥看框架】——Linq實現動態模糊查詢

      引言   在上一篇部落格中我給大家介紹了我們怎樣用EF自動生成實體，當我們生成實體後就需 要面向實體來操作，而不再是針對資料庫中的表，這就需要一種新的知識——Linq，利 用Linq實

一分鐘實現Android多張圖片選擇

圖片選擇器, 支援多圖選擇和圖片預覽等功能。 支援jitpack 支援選擇多張 支援選擇圖片數量上限 支援圖片選擇順序 支援圖片預覽 使用步驟

python的print（flush=True）實現動態loading......效果

python的print（flush=True）實現動態Loading......效果 import time

Android學習之BlurImageView實現影象模糊效果

今天看了jj大神的部落格，裡面寫了一篇關於基於universalImageLoader實現圖片載入控制元件BlurImageView，看了不甚欣喜，就寫篇博文記錄以記之，望大家共勉之。 第一件事，上效果圖，這樣大家才能真正瞭解這個控制元件的效果，大家看了之後一