【移動應(yīng)用開發(fā)技術(shù)】使用iOS8的虛化效果

【移動應(yīng)用開發(fā)技術(shù)】使用iOS8的虛化效果

在iOS7中，一個重大的改變就是隨處可見的虛化，這在通知中心和控制中心表現(xiàn)得尤為搶眼:然而，當(dāng)開發(fā)者們著手去將類似的模糊效果加入自己的App的時候，他們會發(fā)現(xiàn)有相當(dāng)嚴(yán)重的障礙。那時蘋果所界定的設(shè)備可用范圍相當(dāng)簡單，并不強大到足以支持在第三方應(yīng)用中實現(xiàn)實時模糊。并聲稱開發(fā)者們很可能在App里濫用虛化從而嚴(yán)重影響用戶體驗。不過，精明又狡猾的程序員們很快的創(chuàng)造了自己基于模糊靜態(tài)圖片方法來破解實時模糊的算法。大部分解決方案都效果卓越。不過，之后的iOS8在開發(fā)者工具箱中添加了官方的模糊效果，不僅相當(dāng)高效，而且其使用的簡單程度讓人驚嘆。提示：想知道如何使用靜態(tài)模糊圖片來模擬實時模糊的話可以參考這篇博文。模糊化掃盲想要使模糊效果顯得美觀而又高效需要一定技巧，在這一節(jié)你將會了解到最常見的模糊算法以及如何使用模糊效果來提升你App的用戶體驗。怎么做到模糊模糊的對象是圖片，想要實現(xiàn)模糊，你需要對圖片中的每一個像素使用模糊算法，這樣會得到一個對原圖進(jìn)行了均勻模糊后的圖片。模糊算法可以在模糊的風(fēng)格和模糊的復(fù)雜度上有很多變化，不過在這個教程里你將會運用到一個最為常見而且頗為出名的算法——高斯模糊。模糊算法通常會檢索圖片的每一個像素點并基于它周圍的像素點來計算該像素在模糊后的灰度值。比如，我們想象一張如下所示網(wǎng)格圖：每一個小格子代表了一個獨立的像素，每個像素點有一個介于1和10之間的值。假設(shè)我們要對中心的像素點進(jìn)行模糊化，那就需要計算四周八個像素中的值的算術(shù)平均數(shù)，并將這個數(shù)作為中心像素的值插入進(jìn)去。結(jié)果如下圖：接著對原圖的每一個像素點都重復(fù)同樣的操作(編者按：原圖中每一個像素的新值應(yīng)該插入到一張新圖片相應(yīng)位置的像素中去以免出現(xiàn)錯誤，原圖的像素值依舊不變，原作者并未提示這一點)。上面的模糊例子僅僅用每個方向上的一個像素單位來進(jìn)行計算新圖片的像素值，你可以擴(kuò)大模糊所要采用的像素半徑來提升圖片的模糊效果，如下圖所演示的這樣：提示：一般說來，使用的模糊半徑越大則處理圖片時候的計算量會越多。iOS會將大部分圖像處理工作交給GPU來處理以確保主線程不會被卡死。關(guān)于模糊化的設(shè)計人總是會不由自主的被那些對焦準(zhǔn)確的部分而忽視掉被虛化的部分。不管你信不信，這是大自然的道理，因為人眼就是這么工作的。眼球的對焦機(jī)制好像一個調(diào)節(jié)器一樣捕捉那些離你忽遠(yuǎn)忽近的物體，這樣才能讓你感受到周圍一切事物的深度和距離。App設(shè)計師實際上通過模糊掉那些無關(guān)緊要的內(nèi)容來引導(dǎo)用戶的目光關(guān)注那些沒有被模糊掉的要素，比如時下流行的Twitter客戶端就是一個很好的示例：上圖中背景里的用戶界面能夠勉強識別，因而為用戶提供了一個情景意識來讓他們知道正處于導(dǎo)航層中的哪個位置。在這個例子中用戶只需要選擇一個賬戶登入，就可以退回到?jīng)]有被模糊的背景圖層里去。提示：雖然模糊能帶給人非常清新的視覺體驗，不過也切忌在你的App中過度使用，因為過度使用或者使用不當(dāng)都會分散用戶的注意力或者惹惱用戶。遵照標(biāo)準(zhǔn)的模糊設(shè)計方案來讓用戶關(guān)注到你想要給出的事物，這樣你就不容易弄糟。你可以在蘋果iOS開發(fā)者中心的iOSHumanInterfaceGuidelines文檔中的DesigningforiOS章節(jié)了解到更多內(nèi)容。開始為了理解如何實現(xiàn)模糊，你需要嘗試在一款以新格林童話故事為藍(lán)本的App上添加合適的模糊效果，這款A(yù)pp叫做Grimm。該應(yīng)用為用戶提供了一系列的童話故事，當(dāng)用戶點開某個童話時，它就會在屏幕上顯示完整的故事內(nèi)容。用戶可以自定義顯示的字體、文本對齊，以及適用于日間或夜晚閱讀的顏色主題?，F(xiàn)在開始你需要下載一個初始工程，在Xcode中打開Grimm.xcodeproj,然后打開Grimm.storyboard看一下App中的視圖控制器，像下面這樣：你可略過上圖中最前面的那個視圖控制器，因為它在App中只不過是個簡單的底層導(dǎo)航控制器。你需要關(guān)注的是后面有編號的視圖控制器：1.第一個控制器是StoryListController，是用于顯示數(shù)據(jù)庫中所有童話故事的列表。2.當(dāng)你點擊一個童話故事時就會切換到這個視圖控制器StoryViewController，它會顯示選中童話的標(biāo)題和文本內(nèi)容。3.最后的OptionsController是包含在StoryViewController中的，會列出一些可用的字體、對齊、顏色選項。只需要在StoryViewController中輕擊設(shè)置圖標(biāo)就能顯示它。構(gòu)建并運行，你就會看到如下所示的一個初始界面：你可以體驗一下這個應(yīng)用，選好童話之后，點擊省略號喚出選項視圖來切換不同的字體和閱讀模式，這樣可以了解用戶界面的基本功能。提示：你可以在模擬器或者除了iPad2之外的iOS8設(shè)備上運行這個應(yīng)用。出于性能上的考慮蘋果限制了在iPad2上顯示模糊效果，App本身的確能很好的運行在iPad2上，只不過你會看不到任何愜意的模糊效果而已。手動模糊技巧眼尖的同學(xué)可能會發(fā)現(xiàn)在這個工程里面還殘留有Objective-C代碼。為此焦慮大可不必，這一段Objective-C代碼在很多應(yīng)用工程里面都有用到，而且還相當(dāng)堅挺。它的作用是在你的所有Swift文件中接入Grimm-Bridging-Header.h頭文件，因為我們在這里沒有必要再單獨為Swift重寫一個。提示：Swift被設(shè)計得能夠良好的兼容Objective-C，這樣的話包括蘋果自己的開發(fā)人員在內(nèi)的開發(fā)者能夠直接在工程里添加Swift代碼而免去重構(gòu)代碼的麻煩。連接了頭文件之后你就可以在你的Swift文件中寫進(jìn)Objective-C代碼了。在項目資源管理器中打開Grimm\Categories\UIImage+ImageEffects.m文件，略過前面所有的注釋來看看形如applyBlurWithRadius:tintColor:saturationDeltaFactor:maskImage:的代碼段，本教程從頭到尾都不會覆蓋或是修改這些代碼，但是讀一讀有助于你理解其中包括哪些基本功能。在iOS7發(fā)布的時候蘋果還提供了UIImage類來演示如何如何對圖片應(yīng)用靜態(tài)模糊。這充分的發(fā)揮了Accelerate框架在使用向量和矩陣運算上的優(yōu)勢，使得在圖像處理上使用這些計算時變得更為方便。applyBlurWithRadius:tintColor:saturationDeltaFactor:maskImage:這里的參數(shù)有模糊半徑、飽和度、以及可選的掩蓋圖片。該方法會運用大量的數(shù)學(xué)運算生成一張?zhí)幚砗蟮男聢D片。獲取快照在你使用你的模糊效果前你需要獲取一張快照，今天你的大部分力氣將會花在StoryViewController視圖底部的繪制選擇上。打開StoryViewController.swift文件并找到setOptionsHidden方法，在這里你會先獲取整個StoryViewController控制器的截圖，然后在將其模糊化之后作為選項界面的背景圖片。把下面這個方法添加到setOptionsHidden方法前面：func

updateBlur()

{

//為了避免在截圖的時候截到選項界面，因此先要確保選項界面必須是隱藏狀態(tài)。

optionsContainerView.hidden

=

true

//創(chuàng)建一個新的ImageContext來繪制截圖，你沒有必要去渲染一個完整分辨率的高清截圖，使用ImageContext可以節(jié)約掉不少的計算量

UIGraphicsBeginImageContextWithOptions(self.view.bounds.size,

true,

1)

//將StoryViewController中的界面繪制到ImageContext中去，因為你需要確保選項界面是隱藏狀態(tài)因此你需要等待屏幕刷新后才能繪制

self.view.drawViewHierarchyInRect(self.view.bounds,

afterScreenUpdates:

true)

//將ImageContext放入一個UIImage內(nèi)然后清理掉這個ImageContext

let

screenshot

=

UIGraphicsGetImageFromCurrentImageContext()

UIGraphicsEndImageContext()

}

在點擊省略號之后你需要調(diào)用一個updateBlur方法來模糊截圖，這樣你需要在setOptionsHidden方法的一開始添加如下代碼：if

!hidden

{

updateBlur()

}更進(jìn)一步之前，你應(yīng)該檢查一下你是否截到你想截的那張圖。在你的上一步添加的updateBlur方法源碼中找到UIGraphicsEndImageContext()這一行并添加一個斷點，然后構(gòu)建并運行，選擇一個童話故事并打開它。一旦童話打開就點擊省略號來觸發(fā)斷點。在調(diào)試欄里展開screenshot變量然后選中如下嵌套在其中的some變量：敲擊空格鍵來打開QuickLook，你應(yīng)該會看到一張故事欄的非高清截圖。如下所示：請注意在截圖中并未包括UINavigationController中的任何元素，因為故事列表的視圖是作為UINavigationController的背景圖存在的，導(dǎo)航控制器則位于截圖的區(qū)域之外了。現(xiàn)在你已經(jīng)能截到一張正確的快照了。你可以使用我們之前提到的UIImage類來對你的截圖開始進(jìn)行模糊化。模糊掉你的快照仍舊打開StoryViewController.swift文件，找到你剛剛更改過的updateBlur方法，在最后一行UIGraphicsEndImageContext()的下面添加這行代碼：let

blur

=

screenshot.applyLightEffect()提示：你可以在滾動槽里面拖著斷點上下移動。構(gòu)建并運行，打開一則童話故事，點擊導(dǎo)航器里面的省略號，然后在調(diào)試欄里面找到blur變量并使用空格打開QuickLook。稍等……blur里面好像什么都沒有？去哪了？你沒有看到任何東西是因為你的斷點恰好放在了blur變量設(shè)置的那一行，這樣Xcode會停在這一行執(zhí)行之前的一步。想要執(zhí)行下圖中高亮的那一行你可以敲擊F6或者如圖中所示點擊執(zhí)行下一步：現(xiàn)在你可以展開blur變量了，選擇底下的那個some變量然后敲擊空格鍵喚出QuickLook查看你模糊化后的圖片：提示：LLDB(Xcode的調(diào)試器)有時候并不是很適宜用于Swift，所以你可能會需要點兩次執(zhí)行下一步才會顯示一個some變量。你現(xiàn)在可以獲取一張快照并且執(zhí)行模糊化了，接下來要做的就是在App中加入這張模糊后的圖片了。在視圖中顯示模糊圖片打開StoryViewController.swift文件在屬性定義的那堆代碼的開始加入下面這行：var

blurView

=

UIImageView()這里可以為每個StoryViewController實例初始化一個UIImageView。找到viewDidLoad方法并在這個它的最后加上這樣一段：optionsContainerView.subviews[0].insertSubview(blurView,

atIndex:0)在Grimm.storyboard中把OptionsController放進(jìn)了一個視圖容器以方便用戶點擊省略號時候就顯示出來。因為你無需直接使用OptionsController所在圖層，你要做的就是獲取這個容器的subview，在這種情況下這層view只是恰好屬于OptionsController。最后你需要把那個模糊的blurview作為subview添加到視圖堆棧的最底部，保證它處于其他所有視圖的下方。在StoryViewController.swift文件中找到updateBlur方法在最后添加如下代碼：blurView.frame

=

optionsContainerView.bounds

blurView.p_w_picpath

=

blur

optionsContainerView.hidden

=

false因為blurView在Storyboard中并沒有被設(shè)置過，所以它會有一幀CGRectZero的圖片，除非你有手動設(shè)置過。當(dāng)然你也可以設(shè)置你剛剛模糊生成的那張圖片的屬性。這里還要注意的是你在截圖之前曾經(jīng)把optionsContainerView設(shè)置為不可見的隱藏狀態(tài)，一定要記得在虛化方法完成的最后將optionsContainerView設(shè)置為可見。取消你之前設(shè)定的斷點，構(gòu)建并運行，在選擇了一則童話之后點擊設(shè)置選項，注意看著它范圍內(nèi)的模糊效果，如下：這一個虛化看上去還是有點猥瑣，因為它好像跟后面的文本并不是很搭配？在默認(rèn)情況下，UIImageView會重置圖片的大小以確保和視圖中的畫面適應(yīng)，也就是說那張大一些的虛化圖片已經(jīng)被壓縮小了。所以就產(chǎn)生了這樣的效果。為了修正這一錯誤，你需要把UIImageView的contentMode屬性改為除了默認(rèn)的UIViewContentMode.ScaleToFill外的其它值。在updateBlur中設(shè)置blurView那一行的下面貼上這些代碼：blurView.contentMode

=

.BottomUIViewContentMode.Bottom表示強制讓圖片保持原有大小，而不是僅有只有UIImageView原圖本身的中下部那么大。構(gòu)建并運行，現(xiàn)在看看虛化的效果如何了？在你的靜態(tài)模糊準(zhǔn)備拿去使用之前你還需要多考慮一個事，旋轉(zhuǎn)你的設(shè)備或者虛擬機(jī)(command+左/右方向鍵)，你可以看到視圖的大小并沒有被重置。因為你的所有文本采用了自動布局，所以之前的截圖不再有用了，你需要在旋轉(zhuǎn)之后重新截圖快照并且更新一下blurView。這個很簡單就可以實現(xiàn)，在StoryViewController.swift重寫一下下面這個方法：override

func

viewWillTransitionToSize(size:

CGSize,

withTransitionCoordinator

coordinator:

UIViewControllerTransitionCoordinator)

{

//

animateAlongsideTransition方法可以使你旋轉(zhuǎn)屏幕的時候的變化更為動感并且在旋轉(zhuǎn)完成后作一些清理，你僅僅需要的是后者，因為你還需要截下optionsViewController旋轉(zhuǎn)之后的一幀圖。

coordinator.animateAlongsideTransition(nil,

completion:

{

context

in

//

在旋轉(zhuǎn)后更新一下blurView，這樣就會使用新的布局了

self.updateBlur()

})

}構(gòu)建并運行之后試著改變一下設(shè)備或者模擬器的角度，會發(fā)現(xiàn)有新的布局了：模糊范圍的大小正確無誤，不過還不夠?；瑒雍竺娴奈谋緟^(qū)你會發(fā)現(xiàn)虛化部分沒有發(fā)生任何改變。根據(jù)上面的經(jīng)驗?zāi)阋矐?yīng)該知道該怎么修改。而之后的iOS8提供了動態(tài)生成虛化的工具。應(yīng)用中采用實時模糊效果這一事從開發(fā)者們在iOS7上開辟的解決方案以來那是說來話長了。iOS8上的模糊效果iOS8提供了一套完整實用的虛化工具。UIVisualEffect的子類UIBlurEffect正是我們所感興趣的。UIBlurEffect提供了你在導(dǎo)航欄、通知中心和控制中心里看到的那些漂亮的虛化，你也可以在你的App中使用這個效果。添加UIBlurEffect打開StoryViewController.swift文件之后找到setOptionsHidden方法，如果你之前在第一個if條件分支里面寫入過updateBlur，那就將它注釋掉。修改后如下：雖然你做完了，但是你不能完全保證blurview沒有被添加到場景中去，注釋掉下面這一行：optionsContainerView.subviews[0].insertSubview(blurView,

atIndex:0)提示：不要只是簡單的刪除掉那些代碼，你只需注釋掉就好，這樣也便于你在回顧的時候發(fā)現(xiàn)有什么不同。如果你對你手動添加的模糊代碼沒有任何想法，那你也可以刪掉它們而非注釋。構(gòu)建并運行之后你會發(fā)現(xiàn)除了你的虛化不見了而外剩下的部分都能正常運行。打開Grimm.storyboard然后找到OptionsControllerScene，選擇view，展開AttributesInspector然后更改view的background為Clearcolor，如下：打開OptionsController.swift文件在viewDidLoad方法中加入下面代碼，位置就在你之前添加過的optionsView的后面：//

創(chuàng)建一個樣式為UIBlurEffectStyle.Light的UIBlurEffect，定了要應(yīng)用的效果，其他的效果樣式還有UIBlurEffectStyle.ExtraLight和UIBlurEffectStyle.Dark

let

blurEffect

=

UIBlurEffect(style:

.Light)

//

創(chuàng)建一個UIVisualEffectView并為其設(shè)置需要使用的效果。UIVisualEffectView是UIView的子類，在這里單獨用來定義和顯示復(fù)雜的虛化效果。

let

blurView

=

UIVisualEffectView(effect:

blurEffect)

//

解除blurView自適應(yīng)遮罩大小限制的變化，過會兒你也可以手動添加限制，然后將它至于視圖堆棧里的最下面。如果你把它加入了最上方，它會把所有的控制器都遮在下面。

blurView.setTranslatesAutoresizingMaskIntoConstraints(false)

view.insertSubview(blurView,

atIndex:

0)現(xiàn)在你需要確保你的blurView能夠適宜的布局。仍然是在viewDidLoad中，在addConstraints的調(diào)用之前寫入下面代碼：constraints.append(NSLayoutConstraint(item:

blurView,

attribute:

.Height,

relatedBy:

.Equal,

toItem:

view,

attribute:

.Height,

multiplier:

1,

constant:

0))

constraints.append(NSLayoutConstraint(item:

blurView,

attribute:

.Width,

relatedBy:

.Equal,

toItem:

view,

attribute:

.Width,

multiplier:

1,

constant:

0))這些參數(shù)限制會使得blurView的畫面總是與OptionsController相適應(yīng)。構(gòu)建并運行。打開童話故事點擊省略號，然后滑動后面的文本，會發(fā)現(xiàn)虛化部分能夠?qū)崟r變化了：現(xiàn)在你就擁有一個能夠動態(tài)渲染虛化的App了，不單只是看上去好看，你還是采用了iOS核心功能實現(xiàn)的。添加Vibrancy虛化的效果相當(dāng)棒——不過蘋果像以前一樣對其進(jìn)行了提升。結(jié)合使用UIVibrancyEffect與UIVisualEffectView可以調(diào)整文本的顏色使得App看上去更加艷麗。下面這張圖展示了Vibrancy在背景圖片完全相同的情況下如何讓你的標(biāo)簽和圖標(biāo)在屏幕上顯得更為舒適：左邊的顯示的是通常情況下的標(biāo)簽和按鈕，而右邊的顯示的是應(yīng)用了Vibrancy之后的效果。提示：UIVibrancyEffect必須添加到已經(jīng)用UIBlurEffect配置過的UIVisualEffectView中去，否則就不會有任何的虛化圖片會應(yīng)用Vibrancy效果。在OptionsController.swift文件中找到viewDidLoad，在自動布局限制條件之前添加下面代碼：//

使用你之前設(shè)置過的blurEffect來構(gòu)建UIVibrancyEffect，UIVibrancyEffect是UIVisualEffect另一個子類。

let

vibrancyEffect

=

UIVibrancyEffect(forBlurEffect:

blurEffect)

//

創(chuàng)建UIVisualEffectView來應(yīng)用Vibrancy效果,這個過程恰巧跟生成模糊圖一樣。因為你使用的是自動布局所以在這里需要把自適應(yīng)大小改為false

let

vibrancyView

=

UIVisualEffectView(effect:

vibrancyEffect)

vibrancyView.setTranslatesAutoresizingMaskIntoConstraints(false)

//

將optionsView添加入vibrancyView的contentView屬性里，這樣就能確保所有的控制視圖都會應(yīng)用Vibrancy效果

vibrancyView.contentView.addSubview(optionsView)

//

最后你需要在blurView的contentView里加入vibrancyView來完成效果

blurView.contentView.addSubview(vibrancyView)最后一件事就是為Vibrancy視圖設(shè)置自動布局的限制，這樣就可以與你的控