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

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

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

updateBlur()

{

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

optionsContainerView.hidden

=

true

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

UIGraphicsBeginImageContextWithOptions(self.view.bounds.size,

true,

1)

//將StoryViewController中的界面繪制到ImageContext中去，因?yàn)槟阈枰_保選項(xiàng)界面是隱藏狀態(tài)因此你需要等待屏幕刷新后才能繪制

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

afterScreenUpdates:

true)

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

let

screenshot

=

UIGraphicsGetImageFromCurrentImageContext()

UIGraphicsEndImageContext()

}

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

!hidden

{

updateBlur()

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

blur

=

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

blurView

=

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

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

=

optionsContainerView.bounds

blurView.p_w_picpath

=

blur

optionsContainerView.hidden

=

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

=

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

func

viewWillTransitionToSize(size:

CGSize,

withTransitionCoordinator

coordinator:

UIViewControllerTransitionCoordinator)

{

//

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

coordinator.animateAlongsideTransition(nil,

completion:

{

context

in

//

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

self.updateBlur()

})

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

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

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

let

blurEffect

=

UIBlurEffect(style:

.Light)

//

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

let

blurView

=

UIVisualEffectView(effect:

blurEffect)

//

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

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ù)限制會(huì)使得blurView的畫面總是與OptionsController相適應(yīng)。構(gòu)建并運(yùn)行。打開童話故事點(diǎn)擊省略號(hào)，然后滑動(dòng)后面的文本，會(huì)發(fā)現(xiàn)虛化部分能夠?qū)崟r(shí)變化了：現(xiàn)在你就擁有一個(gè)能夠動(dòng)態(tài)渲染虛化的App了，不單只是看上去好看，你還是采用了iOS核心功能實(shí)現(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中去，否則就不會(huì)有任何的虛化圖片會(huì)應(yīng)用Vibrancy效果。在OptionsController.swift文件中找到viewDidLoad，在自動(dòng)布局限制條件之前添加下面代碼：//

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

let

vibrancyEffect

=

UIVibrancyEffect(forBlurEffect:

blurEffect)

//

創(chuàng)建UIVisualEffectView來應(yīng)用Vibrancy效果,這個(gè)過程恰巧跟生成模糊圖一樣。因?yàn)槟闶褂玫氖亲詣?dòng)布局所以在這里需要把自適應(yīng)大小改為false

let

vibrancyView

=

UIVisualEffectView(effect:

vibrancyEffect)

vibrancyView.setTranslatesAutoresizingMaskIntoConstraints(false)

//

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

vibrancyView.contentView.addSubview(optionsView)

//

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

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