iOS 7中實現模糊效果

本文譯自iOS 7 Blur Effects with GPUImage。

iOS 7在視覺方面有許多改變，其中非常吸引人的功能之一就是在整個系統中巧妙的使用了模糊效果。許多第三方應用程式已經採用了這樣的設計細節，並以各種奇妙的和具有創造性的方式使用它。

本文將通過幾種不同的技術來實現iOS 7中的模糊效果，當然，這一切都利用了一個名為GPUImage的框架。

GPUImage是由Brad Larson創建的，它利用GPU，使在圖片和視頻上應用不同的效果和濾鏡變得非常的容易，同時它還擁有出色的性能，並且它的性能要比蘋果內置的相關APIs出色。

註意：本文需要一臺物理設備來編譯並運行示常式序(在模擬器上無法使用)。同樣還需要一個iOS開發者賬號。如果你還沒有開發者賬號的 話，可以來[這裡](https://developer.apple.com/)註冊一個。註冊為開發者之後，會有許多福利喲，例如可以使用物理設備來 開發程式，提前獲得蘋果的相關測試版程式，以及大量的開發資源。

下麵我們先來看看本文的目錄結構：

• 開始
• 為什麼要是用模糊效果
  • 深度引導
  • 上下文
  • 關註度
• 添加靜態的模糊效果
  • 創建截圖Category
  • 利用斷點測試截屏圖片
  • 顯示截屏圖片
  • 設置contentsRect
  • 重置模糊濾鏡
  • 對其背景圖片
• 實時模糊
• 線程中簡潔的分支
• 一些潛在的實時模糊方案
• 一個折中的方法——對視頻實時模糊
  • 利用GPUImage對視頻進行模糊處理
• 何去何從？

開始

首先先來這裡下載本文的starter工程，並將其解壓出來。

用Xcode打開Video Blurring.xcodeproj，並將工程運行到設備中。此時看到程式的效果如下所示：

點擊屏幕左上角的菜單(三條橫紋)，可以看到界面中出現兩個選項：錄製視頻和播放已有視頻。

請註意，現在所有的用戶界面都有一個灰色的背景，是不是感覺有點沉悶呢，本文我們就利用iOS 7中的模糊效果來替換掉這些沉悶的灰色背景。

為什麼要是用模糊效果

除了外觀看起來很棒以外，模糊效果還可以讓程式給用戶帶來3個重要的概念：深度引導、上下文和關註度。

深度引導

在用戶界面上，模糊效果可以給用戶提供一個深度引導效果，並且有利於用戶對程式導航的理解。在之前的iOS版本中的深度引導效果是通過：三維斜面 (three-dimensional bevels)和有關澤的按鈕(反映出一個模擬的光源)，而在iOS 7中是通過模糊和視差(parallax)來實現的。

這裡說的視差效果，可以很明顯的觀察出來：在裝有iOS 7的設備中，將設備從一側傾斜至另一側，會發現設備中的圖標在移動(會獨立於背景)。這樣可以給用戶做出一個提示：界面是由不同的層構成的，並且重要的界 面元素是在最前面的——這也涉及到下麵將要介紹的一個概念：上下文。

上下文

上下文可以讓用戶在程式內獲得一種軸承的感覺。動畫的過度效果就提供了一種非常優秀的上下文，當用戶點擊一個按鈕時，在兩個view之間利用動畫效 果來切換畫面(而不是直接顯示一個新的view)，可以讓用戶知道新的view是從哪裡出現的，並且可以讓用戶很容易知道如何回到上一個view。

模糊效果可以將上一個view當做背景顯示出來，儘管上一個view已經失去焦點了，不過可以給用戶提供更多的上下文：剛剛是在哪裡。通知中心就是一個非常棒的例子：當拉下通知中心時，我們可以在背景中看到原來的view(即使現在正在處於通知中心界面)。

關註度

讓界面更加關註於某些選擇項上，而移除不需要的內容，讓用戶可以更加快捷的進行導航。用戶可以本能的忽略那些被模糊的界面元素，而將註意力集中到某些界面元素中。

通過本文，你將學到兩種模糊類型的實現方法：靜態模糊和動態模糊。靜態模糊代表著快照的時間點，它並不能反映被模糊界面元素的變化。大多數情況下，使用靜態模糊效果就足夠了。相反，動態模糊則是對需要模糊的背景做出實時更新。

相信看到具體的效果才是最好的，下麵我們就來看看模糊效果的具體實現吧！

添加靜態的模糊效果

創建一個靜態模糊效果首先是將當前屏幕中的view轉換為一幅圖片。獲得圖片之後，只需要對圖片做模糊處理就可以了。將view轉換為一幅圖片(截屏)蘋果已經提供了一些非常棒的APIs了，並且在iOS 7中又有了新的方法可以讓截屏更加快速。

這些新的方法屬於截屏APIs中的一部分，截屏APIs不僅可以對某個view截屏，還能把整個view層次截屏，如果你希望對某個view截屏，那麼可以把view中的按鈕、標簽、開關等各種view也進行截屏。

此處我們將截屏的邏輯實現到UIView的一個category中。這樣一來，我們就可以很方便快捷的將任意的view(以及view中的內容)轉換為一個圖片——也算是代碼的重用吧。

創建截圖Category

打開File/New/File...，然後選擇iOS/Cocoa Touch/Objective-C category，如下圖所示：

將這個category命名為Screenshot，並將它的category選為UIView,如下圖所示：

將下麵這個方法聲明到UIView+Screenshot.h中：

接著將如下方法添加到UIView+Screenshot.m中：

上面的方法中，首先調用了UIGraphicsBeginImageContext()，最後調用的是UIGraphicsEndImageContext()，這兩行代碼可以理解為圖形上下文的一個事物處理過程。一個上下文可以理解為不同的概念，例如屏幕，或者此處可以理解為一幅圖片。這裡的兩行代碼起到一個離屏畫布的作用——可以將view繪製上去。

drawViewHierarchyInRect:afterScreenUpdates:方法利用view層次結構並將其繪製到當前的上下文中。

最後，UIGraphicsGetImageFromCurrentImageContext()從圖形上下文中獲取剛剛生成的UIImage。

現在，我們已經完成了category的實現，接著我們只需要在使用到的地方將其import一下即可。

如下代碼所示，將代碼添加到DropDownMenuController.m頂部：

同時，將如下方法添加到相同的文件中：

上面的代碼確保是對superview進行截屏，而不僅僅是當前的view。不這樣做的話，截屏獲得的圖片只是menu本身。

利用斷點測試截屏圖片

為了測試截屏的效果，我們在convertViewToImage調用的下麵一行添加一個斷點。這樣當命中斷點時，程式會在斷點中暫停執行，這樣我們就可以看到截屏的圖片，以此確保截屏代碼的正確性:

在測試之前還有一件事情需要做：調用上面這個方法。

找到show方法，併在addToParentViewController下麵直接調用一下updateBlur：

編譯並運行程式，點擊菜單按鈕，可以看到Xcode在斷點出停止了，如下所示：

在debugger左下角hand pane中選擇image，然後單擊快速查找圖標按鈕，就可以預覽剛剛的截屏啦：

如上圖所示，正是我們所預期的。

顯示截屏圖片

將截取到的圖片顯示到菜單的背景中就是小菜一碟啦。

一般來說我們都會利用UIImageView來顯示一幅圖片，而由於我們要利用GPUImage來模糊圖片，所以需要使用GPUImageView。

在這裡的工程中，已經添加好了GPUImage框架，我們只需要將頭文件import一下即可。

將下麵的代碼添加到DropDownMenuController.m頂部：

註意：GPUImage被包含在一個框架中，所以在import語句中，需要利用尖括弧，而不是雙引號。

此時，有一個_blurView，類型為UIView——是菜單的灰色背景。將UIView修改為GPUImageView，如下所示：

修改之後，Xcode會報一個warning：大意是你利用UIView進行實例化，而不是預期的GPUImageView。

可以通過下麵的方法消除這個警告，在viewDidLad中修改做如下修改：

緊隨其後，將如下兩行代碼添加進去，並移除設置背景色的代碼：

clipToBounds屬性設置為YES，把超出_blurView範圍的子view隱藏起來，而contentsGravity確保圖片出現在image view的頂部。

由於_blurView已經用於背景了，所以此處不需要額外設置了。

接著，我們還需要聲明一個用於模糊效果的過濾器。

將如下代碼添加到DropDownMenuController.m:文件的@implementation中：

找到之前添加的斷點，右鍵單擊，並選中Delete Breakpoint：

下麵是非常重要的一步了——初始化模糊濾鏡。將如下代碼添加到DropDownMenuController.m中：

註意：上面將模糊半徑設置為一個像素，這裡暫時將這個值設置低一點，這樣可以確保圖片的正確定位，當一切ok之後，再增加模糊半徑即可。

下麵是時候將圖片顯示到GPUImageView中了。不過並不是簡單的實例化一個UIImage，並將其添加到GPUImageView中。首先需創建一個GPUImagePicture。

將如下代碼添加到updateBlur方法的底部：

至此，我們獲得了一個圖片，模糊濾鏡和iamge view。

接著再將如下代碼添加到updateBlur底部：

上面這幾行代碼，就像膠水一樣，將所有的事情關聯起來。將濾鏡當做target添加到圖片中，然後將image view當做濾鏡的target。

上面代碼對圖片的處理全程發生在GPU上，也就是說當進行模糊計算和顯示時，並不會影響到用戶界面。當處理結束時，會把圖片顯示到image view上面。

編譯並運行程式，點擊菜單按鈕，可以看到如下類似畫面：

上面的圖片看起來是不是有點奇怪？看到的圖片被縮放到適配到菜單視圖中了。要對此做出修正，我們需要指定圖片的哪一部分需要顯示在GPUImageView中——也就是處理截屏視圖的上半部分。

設置contentsRect

按照如下代碼所示修改DropDownMenuController.m文件中的show方法：

通過指定_blurView.layer.contentsRect來定義一個矩形，在單元坐標空間(unit coordinate space)中，表示只使用layer content的一部分。

編譯並運行程式，點擊菜單按鈕，會看到如下圖所示效果：

雖然已經使用了圖片的一部分，看起來還是不正確，這是因為它的縮放比例還不適合！此處還缺少對正確內容的縮放。

將下麵這行代碼添加到show方法中動畫block的尾部：

contentsScale屬性聲明瞭layer在邏輯坐標空間(以點為單位)和物理坐標空間(以像素為單位)之間的映射關係。更高比例因數表示在渲染layer時，一個點代表著多個像素點。

編譯並運行程式，點擊菜單按鈕，可以看到縮放比例已經正常了：

沒錯——看起來好多了！現在關閉程式，然後重新打開，ou~~發生了什麼？如下圖所示：

看起來這還是有點問題。如果在對view進行animation之前將contentScale設置回2.0，會解決half bar的問題。

將如下代碼添加到DropDownMenuController.m中show方法裡面的animation block上面：

編譯並運行程式，然後點擊菜單，接著關閉菜單，再打開菜單，此時菜單開起來如下所示：

現在半個尺寸的黑色box已經沒有問題了——但是現在是全尺寸的黑色box！

重置模糊濾鏡

上面問題產生的原因是由於進行了二次模糊計算。解決的方法是移除模糊濾鏡中的所有target。如果不這樣做的話，之後對濾鏡的調用不會輸出任何的內容——進而引起黑色box的問題。

按照如下代碼更新一下updateBlur方法：

上面的代碼用processImageWithCompletionHandler:替換了processImage方法。這個新的方法有一個completion block，當image 處理結束時，會運行這個block。一旦image處理結束，我們就可以安全的將濾鏡中的target全部移除。

編譯並運行程式，點擊菜單，檢查一下黑色box問題是不是已經解決掉了：

多次打開和關閉菜單，確保之前的那個bug已經解決掉啦！

現在仔細觀察一下打開菜單的模糊效果——有些東西看起來不正確。為了更加明顯的觀察到問題，我們減慢動畫的時間，讓其慢慢的移動。

在show方法中，將animation bloc的持續時間修改為10.0f。

編譯並運行程式，點擊菜單，然後觀察一下菜單出場的慢動作：

恩，現在可能你已經發現問題了。被模糊的圖片從頂部往下滑動——而我們的本意是希望模糊效果從上往下滑(並不是圖片本身)。

對其背景圖片

此處我們需要對靜態模糊效果使用一些技巧。當出現菜單時，我們需要利用背景來將模糊效果對其。所以在這裡我們不是對image view做移動處理，而是需要對image view做擴展處理，從0開始擴展至image view的全尺寸。這樣就可以確保菜單打開時，圖片依然保留在原位。

在show方法中，我們已經將菜單打開至全尺寸了，所以現在只需要將contentRect的高度設置為0即可(當image view首次創建並隱藏的時候)。

將下麵的代碼添加至DropDownMenuController.m文件的viewDidLoad方法中——在_blurView初始化的下方：

同時，在相同的一個文件中，將下麵的代碼添加到animation block的尾部：

contentRect屬性是可以動畫方式設置的。因此在動畫期間會rect會自動的插補上。

編譯並運行程式。可以看到，問題已經解決：

這樣看起來自然多了。現在我們已經有一個具有模糊背景的滑動菜單了。

現在是時候把動畫所需時間調整一下了（為了更好的效果，其實之前設置的值是為了測試所用）：設置為0.25秒，接著在updateBlur方法中將_blurFilter.blurRadiusInPixels設置為4.0f。

編譯並運行程式，多次打開菜單，看看效果如何：

實時模糊

實時模糊涉及到的技術具有一定的難度，有些難點需要解決才行。為了有效的進行實時模糊，我們需要不停(每秒60幀)的截屏、模糊計算和顯示。使用GPUImage每秒中處理60張圖片(模糊並顯示圖片)一點問題都沒有。

真正棘手的問題是什麼呢？如何實時的截取屏幕圖片，信不信由你！

由於截取的屏幕是主用戶界面，所有必須使用CPU的主線程來截屏，並將其轉換為一幅圖片。

提醒：如果事物每秒鐘的變化速度在46幀以上，那麼人眼就無法識別出來了。這對於開發者來說也是一種解脫——現代處理器在各幀之間可以完成更多的大量工作。

線程中簡潔的分支

當運行程式時，會執行大量的指令列表。每一個指令列表都運行在各自的線程中，而我們又可以在多個線程中併發運行各自的指令列表。一個程式在主線程中 開始運行，然後會根據需要，創建新的線程，併在後臺執行線程。如果之前你並沒有管理過多線程，你可能在寫程式的時候總是在主線程中執行指令。

主線程主要處理與用戶的交互，以及界面的更新。確保主線程的響應時間是非常關鍵的。如果在主線程上做了太多的任務，你會明顯的感覺到主界面響應遲鈍。

如果你曾經使用過Twitter貨Facebook，並滾動操作過它裡面的內容，你可能已經感覺到後臺線程在執行操作了——在滾動的過程中，並不是所有的個人圖片立即顯示出來，滾動過程中，程式會啟動後臺線程來獲取圖片，當圖片獲取成功之後，再顯示到屏幕中。

如果不使用後臺線程，那麼table view的滾動過程中，如果在主線程上去獲取個人圖片，會感覺到table view被凍結住了。由於圖片的獲取需要一些時間，所以最好將這樣耗時的操作讓後臺線程來做，這樣就能對用戶界面做平滑的操作和響應了。

那麼對本文的程式有什麼影響呢？之間介紹了，UIView的截屏APIs操作必須在主線程中運行。這就意味著每次截屏時，整個用戶界面都會被凍結中。

對於靜態模糊效果時，由於這個截屏操作很快，你不會感覺到界面的凍結。並且只需要截屏一次。然而在實時模糊效果中需要每秒中截屏60次。如果在主線程中做這樣頻繁的截屏操作，那麼animation和transition會變得非常的遲鈍。

更糟糕的時，如果用戶界面複雜度增加，那麼在截屏過程中就需要消耗更多的時間，那麼就會導致整個程式無法使用了！

那麼怎麼辦呢！

一些潛在的實時模糊方案

這裡有一個關於實時模糊方案：源代碼開源的live blur libraries，它通過降低截屏的速度來實現實時模糊效果，並不是使用每秒截屏60次，可能是20、30或者40次。即使看起來沒有多大區別，但是你的眼睛還是能發現一定的遲鈍——模糊效果並沒有跟程式的其它部分同步起來——這樣一來，界面看起會沒有模糊效果更加的糟糕。

實際上蘋果在它們自己的一些程式中處理實時模糊並不存在類似的問題——但是蘋果並沒有公開相關的API。在iOS 7中UIView的截屏方法，相比於舊方法，性能有了很大的提升，但還是不能滿足實時模糊的需求。

一些開發者利用UIToolbar的模糊效果來做一些不好的操作。沒錯，這是有效果的，但是強烈建議不要在程式中使用它們。雖然這不是私有API，但是這並不算是一種可行的方法，蘋果也可能會reject你的程式。也就是說在，在之後的iOS 7版本中，並不能保證還能正常使用。

蘋果可以在任何時候對UIToolBar做出修改，或許你的程式就有問題了。在iOS 7.0.3更新中，蘋果的修改已經影響到UIToolbar和UINavigationBar了，有些開發者也因此報告出利用相關模糊效果已經失效了！所以最好不要陷入這樣潛在的陷阱裡面！

一個折中的方法——對視頻實時模糊

OK，此時你可能在想，要想在程式中做到實時模糊是不可能的了。那麼還有什麼方法可以突破限制，做到實時模糊效果呢？

在許多場景中，靜態模糊是可以接受的。上一節中，我們對view做適當的修改，讓用戶看起來是對背景圖做的實際模糊處理。當然，這對於靜止不動的背景是合適的，並且還可以在模糊背景上實現一些不錯的效果。

我們可以做一些實驗，看看能不能找到一些效果來實現之前無法做到的實時模糊效果呢？

有一個方法可以試試：對實時視頻做模糊處理，雖然截屏是一個非常大的瓶頸，但是GPUImage非常的強大，它能夠對視頻進行模糊(無論是來自攝像頭的視頻或者已經錄製好的視頻，都沒問題)。

利用GPUImage對視頻進行模糊處理

利用GPUImage對視頻的模糊處理與圖片的模糊處理類似。針對圖片，我們實例化一個GPUImagePicture，然後將其發送給GPUImageiOSBlurFilter，接著再將其發送給GPUImageView。

類似的方法，對於視頻，我們使用GPUImageVideoCamera或GPUImageMovie，將後將其發送給GPUImageiOSBlurFilter，接著再將其發送給一個GPUImageView。GPUImageVideoCamera用於設備中的實時攝像頭，而GPUImageMovie用於已經錄製好的視頻。

在我們的starter工程中，已經實例化並配置好了GPUImageVideoCamera。現在的任務是將播放和錄製按鈕的灰色背景替換為視頻的實時濾鏡效果。

首先是將此處提供的灰色背景實例UIView替換為GPUImageView。完成之後，我們需要調整每個view的contentRect(基於view的frame)。

這聽起來對每個view都需要做大量的工作。為了讓任務變得簡單，我們創建一個GPUImageView的子類，並把自定義的代碼放進去，以便重用。

打開File/New/File…，然後選擇iOS/Cocoa Touch/Objective-C class，如下所示：

將類命名為BlurView，繼承自GPUImageView，如下圖所示：

打開ViewController.m文件，將下麵的import添加到文件頂部：

還是在ViewController.m中，在@implementation中找到_recordView和_controlView的聲明，將其修改為BlurView類型，如下所示：

然後按照如下代碼修改viewDidLoad方法：

接著，需要創建模糊圖片，將其顯示到上面構建的image view中。回到@implementation中，將下麵的兩個聲明添加進去：

現在你已經知道GPUImageiOSBlurFilter的作用了，那麼GPUImageBuffer的作用是什麼呢？它的任務是獲取視頻的輸出，並獲取每一幀，這樣我們就可以方便的對其做模糊處理。一個額外的好處就是它可以提升程式的性能！

一般來說，視頻輸出的內容會通過模糊濾鏡處理，然後發送到背景視圖中(被顯示出來)。不過，在這裡使用buffer的話，發送到buffer的視頻輸出內容，會被分為背景視圖和模糊濾鏡。這樣可以對視頻的輸出顯示做到平滑處理。

將下麵的代碼添加到viewDidLoad方法的頂部(在super調用的後面)：

還是在同一個文件中，將如下高亮顯示的語句添加到useLiveCamera方法中：

上面的模糊背景是用於錄製按鈕的。對於播放按鈕也要做類似的處理。

將下麵的代碼添加到loadVideoWithURL:方法中(在_recordedVideo.playAtActualSpeed = YES;之後)：

編譯並運行程式，打開錄製操作，看看情況如何：

好消息是看起來基本正常！壞消息是整個屏幕被縮放到錄製按鈕中去了。這個問題跟之前遇到的類似。我們需要給BlurView這是適當的contentRect。

打開BlurView.m，用下麵的代碼替換掉initWithFrame:方法：

contentRect的每個參數必須在0.0f和1.0f之間。在這裡只需要利用view的位置除以屏幕的size，得到的值即可。

編譯並運行程式，看看效果如何：

恭喜！至此已經完成了靜態模糊和實時視頻模糊的實現。現在你已經完全可以在程式中添加iOS 7的模糊效果啦！

何去何從？

可以在這裡下載到完整的工程。

本文不僅指導你在程式中使用iOS 7的模糊效果，還介紹瞭如何使用GPUImage框架，這個框架也是我非常希望你能看到的東西。重要的是，本文指出了為什麼要使用模糊，什麼時候使用模糊效果是合適的，這在iOS 7的新設計語言中是一個關鍵的概念。當然也希望在未來的版本中，蘋果能夠將相關APIs提供給開發者使用，不過在那之前，GPUImage是一個不錯的替代品。