溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用iOS8的虛化效果

發(fā)布時(shí)間:2020-07-06 16:37:03 來源:網(wǎng)絡(luò) 閱讀:598 作者:陳凱歌 欄目:移動開發(fā)

在iOS 7中,一個(gè)重大的改變就是隨處可見的虛化,這在通知中心和控制中心表現(xiàn)得尤為搶眼:

使用iOS8的虛化效果

然而,當(dāng)開發(fā)者們著手去將類似的模糊效果加入自己的App的時(shí)候,他們會發(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í)模糊的算法。

大部分解決方案都效果卓越。不過,之后的iOS 8在開發(fā)者工具箱中添加了官方的模糊效果,不僅相當(dāng)高效,而且其使用的簡單程度讓人驚嘆。

提示:想知道如何使用靜態(tài)模糊圖片來模擬實(shí)時(shí)模糊的話可以參考這篇博文。

模糊化掃盲

想要使模糊效果顯得美觀而又高效需要一定技巧,在這一節(jié)你將會了解到最常見的模糊算法以及如何使用模糊效果來提升你App的用戶體驗(yàn)。

怎么做到模糊

模糊的對象是圖片,想要實(shí)現(xiàn)模糊,你需要對圖片中的每一個(gè)像素使用模糊算法,這樣會得到一個(gè)對原圖進(jìn)行了均勻模糊后的圖片。模糊算法可以在模糊的風(fēng)格和模糊的復(fù)雜度上有很多變化,不過在這個(gè)教程里你將會運(yùn)用到一個(gè)最為常見而且頗為出名的算法——高斯模糊。

模糊算法通常會檢索圖片的每一個(gè)像素點(diǎn)并基于它周圍的像素點(diǎn)來計(jì)算該像素在模糊后的灰度值。比如,我們想象一張如下所示網(wǎng)格圖:



使用iOS8的虛化效果

每一個(gè)小格子代表了一個(gè)獨(dú)立的像素,每個(gè)像素點(diǎn)有一個(gè)介于1和10之間的值。假設(shè)我們要對中心的像素點(diǎn)進(jìn)行模糊化,那就需要計(jì)算四周八個(gè)像素中的值的算術(shù)平均數(shù),并將這個(gè)數(shù)作為中心像素的值插入進(jìn)去。結(jié)果如下圖:


使用iOS8的虛化效果


接著對原圖的每一個(gè)像素點(diǎn)都重復(fù)同樣的操作(編者按:原圖中每一個(gè)像素的新值應(yīng)該插入到一張新圖片相應(yīng)位置的像素中去以免出現(xiàn)錯(cuò)誤,原圖的像素值依舊不變,原作者并未提示這一點(diǎn))。

上面的模糊例子僅僅用每個(gè)方向上的一個(gè)像素單位來進(jìn)行計(jì)算新圖片的像素值,你可以擴(kuò)大模糊所要采用的像素半徑來提升圖片的模糊效果,如下圖所演示的這樣:

使用iOS8的虛化效果

提示:一般說來,使用的模糊半徑越大則處理圖片時(shí)候的計(jì)算量會越多。iOS會將大部分圖像處理工作交給GPU來處理以確保主線程不會被卡死。

關(guān)于模糊化的設(shè)計(jì)

人總是會不由自主的被那些對焦準(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è)很好的示例:

使用iOS8的虛化效果

上圖中背景里的用戶界面能夠勉強(qiáng)識別,因而為用戶提供了一個(gè)情景意識來讓他們知道正處于導(dǎo)航層中的哪個(gè)位置。在這個(gè)例子中用戶只需要選擇一個(gè)賬戶登入,就可以退回到?jīng)]有被模糊的背景圖層里去。

提示:雖然模糊能帶給人非常清新的視覺體驗(yàn),不過也切忌在你的App中過度使用,因?yàn)檫^度使用或者使用不當(dāng)都會分散用戶的注意力或者惹惱用戶。

遵照標(biāo)準(zhǔn)的模糊設(shè)計(jì)方案來讓用戶關(guān)注到你想要給出的事物,這樣你就不容易弄糟。你可以在蘋果iOS開發(fā)者中心的iOS Human Interface Guidelines文檔中的Designing for iOS章節(jié)了解到更多內(nèi)容。

開始

為了理解如何實(shí)現(xiàn)模糊,你需要嘗試在一款以新格林童話故事為藍(lán)本的App上添加合適的模糊效果,這款A(yù)pp叫做Grimm。

該應(yīng)用為用戶提供了一系列的童話故事,當(dāng)用戶點(diǎn)開某個(gè)童話時(shí),它就會在屏幕上顯示完整的故事內(nèi)容。用戶可以自定義顯示的字體、文本對齊,以及適用于日間或夜晚閱讀的顏色主題。

現(xiàn)在開始你需要下載一個(gè)初始工程,在Xcode中打開Grimm.xcodeproj,然后打開Grimm.storyboard看一下App中的視圖控制器,像下面這樣:

使用iOS8的虛化效果

你可略過上圖中最前面的那個(gè)視圖控制器,因?yàn)樗贏pp中只不過是個(gè)簡單的底層導(dǎo)航控制器。你需要關(guān)注的是后面有編號的視圖控制器:

1.第一個(gè)控制器是StoryListController,是用于顯示數(shù)據(jù)庫中所有童話故事的列表。

2.當(dāng)你點(diǎn)擊一個(gè)童話故事時(shí)就會切換到這個(gè)視圖控制器StoryViewController,它會顯示選中童話的標(biāo)題和文本內(nèi)容。

3.最后的OptionsController是包含在StoryViewController中的,會列出一些可用的字體、對齊、顏色選項(xiàng)。只需要在StoryViewController中輕擊設(shè)置圖標(biāo)就能顯示它。

構(gòu)建并運(yùn)行,你就會看到如下所示的一個(gè)初始界面:

使用iOS8的虛化效果

你可以體驗(yàn)一下這個(gè)應(yīng)用,選好童話之后,點(diǎn)擊省略號喚出選項(xiàng)視圖來切換不同的字體和閱讀模式,這樣可以了解用戶界面的基本功能。

提示:你可以在模擬器或者除了iPad 2之外的iOS 8設(shè)備上運(yùn)行這個(gè)應(yīng)用。出于性能上的考慮蘋果限制了在iPad 2上顯示模糊效果,App本身的確能很好的運(yùn)行在iPad 2上,只不過你會看不到任何愜意的模糊效果而已。

手動模糊技巧

眼尖的同學(xué)可能會發(fā)現(xiàn)在這個(gè)工程里面還殘留有Objective-C代碼。



使用iOS8的虛化效果


為此焦慮大可不必,這一段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:的代碼段,本教程從頭到尾都不會覆蓋或是修改這些代碼,但是讀一讀有助于你理解其中包括哪些基本功能。

在iOS 7發(fā)布的時(shí)候蘋果還提供了UIImage類來演示如何如何對圖片應(yīng)用靜態(tài)模糊。這充分的發(fā)揮了Accelerate框架在使用向量和矩陣運(yùn)算上的優(yōu)勢,使得在圖像處理上使用這些計(jì)算時(shí)變得更為方便。

applyBlurWithRadius:tintColor:saturationDeltaFactor:maskImage:這里的參數(shù)有模糊半徑、飽和度、以及可選的掩蓋圖片。該方法會運(yùn)用大量的數(shù)學(xué)運(yùn)算生成一張?zhí)幚砗蟮男聢D片。

獲取快照

在你使用你的模糊效果前你需要獲取一張快照,今天你的大部分力氣將會花在StoryViewController視圖底部的繪制選擇上。

打開StoryViewController.swift文件并找到setOptionsHidden方法,在這里你會先獲取整個(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)擊省略號之后你需要調(diào)用一個(gè)updateBlur方法來模糊截圖,這樣你需要在setOptionsHidden方法的一開始添加如下代碼:

if !hidden {
  updateBlur()
}

更進(jìn)一步之前,你應(yīng)該檢查一下你是否截到你想截的那張圖。

在你的上一步添加的updateBlur方法源碼中找到UIGraphicsEndImageContext()這一行并添加一個(gè)斷點(diǎn),然后構(gòu)建并運(yùn)行,選擇一個(gè)童話故事并打開它。

一旦童話打開就點(diǎn)擊省略號來觸發(fā)斷點(diǎn)。在調(diào)試欄里展開screenshot變量然后選中如下嵌套在其中的some變量:

使用iOS8的虛化效果

敲擊空格鍵來打開Quick Look,你應(yīng)該會看到一張故事欄的非高清截圖。如下所示:

使用iOS8的虛化效果


請注意在截圖中并未包括UINavigationController中的任何元素,因?yàn)楣适铝斜淼囊晥D是作為UINavigationController的背景圖存在的,導(dǎo)航控制器則位于截圖的區(qū)域之外了。

現(xiàn)在你已經(jīng)能截到一張正確的快照了。你可以使用我們之前提到的UIImage類來對你的截圖開始進(jìn)行模糊化。

模糊掉你的快照

仍舊打開StoryViewController.swift文件,找到你剛剛更改過的updateBlur方法,在最后一行UIGraphicsEndImageContext()的下面添加這行代碼:

let blur = screenshot.applyLightEffect()

使用iOS8的虛化效果

提示:你可以在滾動槽里面拖著斷點(diǎn)上下移動。

構(gòu)建并運(yùn)行,打開一則童話故事,點(diǎn)擊導(dǎo)航器里面的省略號,然后在調(diào)試欄里面找到blur變量并使用空格打開Quick Look。

稍等……blur里面好像什么都沒有?去哪了?

你沒有看到任何東西是因?yàn)槟愕臄帱c(diǎn)恰好放在了blur變量設(shè)置的那一行,這樣Xcode會停在這一行執(zhí)行之前的一步。

想要執(zhí)行下圖中高亮的那一行你可以敲擊F6或者如圖中所示點(diǎn)擊執(zhí)行下一步:

使用iOS8的虛化效果

現(xiàn)在你可以展開blur變量了,選擇底下的那個(gè)some變量然后敲擊空格鍵喚出Quick Look查看你模糊化后的圖片:

使用iOS8的虛化效果

提示:LLDB(Xcode的調(diào)試器)有時(shí)候并不是很適宜用于Swift,所以你可能會需要點(diǎn)兩次執(zhí)行下一步才會顯示一個(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)擊省略號時(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è)置過,所以它會有一幀CGRectZero的圖片,除非你有手動設(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)的模糊效果,如下:

使用iOS8的虛化效果

這一個(gè)虛化看上去還是有點(diǎn)猥瑣,因?yàn)樗孟窀竺娴奈谋静⒉皇呛艽钆洌?/p>

在默認(rèn)情況下,UIImageView會重置圖片的大小以確保和視圖中的畫面適應(yīng),也就是說那張大一些的虛化圖片已經(jīng)被壓縮小了。所以就產(chǎn)生了這樣的效果。

為了修正這一錯(cuò)誤,你需要把UIImageView的contentMode屬性改為除了默認(rèn)的UIViewContentMode.ScaleToFill外的其它值。

在updateBlur中設(shè)置blurView那一行的下面貼上這些代碼:

blurView.contentMode = .Bottom

UIViewContentMode.Bottom表示強(qiáng)制讓圖片保持原有大小,而不是僅有只有UIImageView原圖本身的中下部那么大。

構(gòu)建并運(yùn)行,現(xiàn)在看看虛化的效果如何了?

使用iOS8的虛化效果

在你的靜態(tài)模糊準(zhǔn)備拿去使用之前你還需要多考慮一個(gè)事,旋轉(zhuǎn)你的設(shè)備或者虛擬機(jī)(command+左/右方向鍵),你可以看到視圖的大小并沒有被重置。

因?yàn)槟愕乃形谋静捎昧俗詣硬季郑灾暗慕貓D不再有用了,你需要在旋轉(zhuǎn)之后重新截圖快照并且更新一下blurView。

這個(gè)很簡單就可以實(shí)現(xiàn),在StoryViewController.swift重寫一下下面這個(gè)方法:

override func viewWillTransitionToSize(size: CGSize,
  withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
  // animateAlongsideTransition方法可以使你旋轉(zhuǎn)屏幕的時(shí)候的變化更為動感并且在旋轉(zhuǎn)完成后作一些清理,你僅僅需要的是后者,因?yàn)槟氵€需要截下optionsViewController旋轉(zhuǎn)之后的一幀圖。
  coordinator.animateAlongsideTransition(nil, completion: { context in
    // 在旋轉(zhuǎn)后更新一下blurView,這樣就會使用新的布局了
    self.updateBlur()
  })
}

構(gòu)建并運(yùn)行之后試著改變一下設(shè)備或者模擬器的角度,會發(fā)現(xiàn)有新的布局了:



使用iOS8的虛化效果


模糊范圍的大小正確無誤,不過還不夠。滑動后面的文本區(qū)你會發(fā)現(xiàn)虛化部分沒有發(fā)生任何改變。

根據(jù)上面的經(jīng)驗(yàn)?zāi)阋矐?yīng)該知道該怎么修改。而之后的iOS 8提供了動態(tài)生成虛化的工具。應(yīng)用中采用實(shí)時(shí)模糊效果這一事從開發(fā)者們在iOS 7上開辟的解決方案以來那是說來話長了。

iOS 8上的模糊效果

iOS 8 提供了一套完整實(shí)用的虛化工具。UIVisualEffect的子類UIBlurEffect正是我們所感興趣的。UIBlurEffect提供了你在導(dǎo)航欄、通知中心和控制中心里看到的那些漂亮的虛化,你也可以在你的App中使用這個(gè)效果。

添加UIBlurEffect

打開StoryViewController.swift文件之后找到setOptionsHidden方法,如果你之前在第一個(gè)if條件分支里面寫入過updateBlur,那就將它注釋掉。修改后如下:

使用iOS8的虛化效果

雖然你做完了,但是你不能完全保證blurview沒有被添加到場景中去,注釋掉下面這一行:

optionsContainerView.subviews[0].insertSubview(blurView, atIndex:0)

提示:不要只是簡單的刪除掉那些代碼,你只需注釋掉就好,這樣也便于你在回顧的時(shí)候發(fā)現(xiàn)有什么不同。如果你對你手動添加的模糊代碼沒有任何想法,那你也可以刪掉它們而非注釋。

構(gòu)建并運(yùn)行之后你會發(fā)現(xiàn)除了你的虛化不見了而外剩下的部分都能正常運(yùn)行。

打開Grimm.storyboard然后找到Options Controller Scene,選擇view,展開Attributes Inspector然后更改view的background為Clear color,如下:

使用iOS8的虛化效果

打開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)遮罩大小限制的變化,過會兒你也可以手動添加限制,然后將它至于視圖堆棧里的最下面。如果你把它加入了最上方,它會把所有的控制器都遮在下面。
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)建并運(yùn)行。打開童話故事點(diǎn)擊省略號,然后滑動后面的文本,會發(fā)現(xiàn)虛化部分能夠?qū)崟r(shí)變化了:


使用iOS8的虛化效果


現(xiàn)在你就擁有一個(gè)能夠動態(tài)渲染虛化的App了,不單只是看上去好看,你還是采用了iOS核心功能實(shí)現(xiàn)的。

添加Vibrancy

虛化的效果相當(dāng)棒——不過蘋果像以前一樣對其進(jìn)行了提升。結(jié)合使用UIVibrancyEffect與UIVisualEffectView可以調(diào)整文本的顏色使得App看上去更加艷麗。

下面這張圖展示了Vibrancy在背景圖片完全相同的情況下如何讓你的標(biāo)簽和圖標(biāo)在屏幕上顯得更為舒適:

使用iOS8的虛化效果

左邊的顯示的是通常情況下的標(biāo)簽和按鈕,而右邊的顯示的是應(yīng)用了Vibrancy之后的效果。

提示:UIVibrancyEffect必須添加到已經(jīng)用UIBlurEffect配置過的UIVisualEffectView中去,否則就不會有任何的虛化圖片會應(yīng)用Vibrancy效果。

在OptionsController.swift文件中找到viewDidLoad,在自動布局限制條件之前添加下面代碼:

// 使用你之前設(shè)置過的blurEffect來構(gòu)建UIVibrancyEffect,UIVibrancyEffect是UIVisualEffect另一個(gè)子類。
let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
// 創(chuàng)建UIVisualEffectView來應(yīng)用Vibrancy效果,這個(gè)過程恰巧跟生成模糊圖一樣。因?yàn)槟闶褂玫氖亲詣硬季炙栽谶@里需要把自適應(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è)置自動布局的限制,這樣就可以與你的控制器視圖保持一直的高寬。

把下面的限制加入viewDidLoad方法的最后:

constraints.append(NSLayoutConstraint(item: vibrancyView,
  attribute: .Height, relatedBy: .Equal,
  toItem: view, attribute: .Height,
  multiplier: 1, constant: 0))
constraints.append(NSLayoutConstraint(item: vibrancyView,
  attribute: .Width, relatedBy: .Equal,
  toItem: view, attribute: .Width,
  multiplier: 1, constant: 0))

構(gòu)建并運(yùn)行,喚出設(shè)置選項(xiàng)來看看你的Vibrancy效果。

使用iOS8的虛化效果

除非你的眼睛也是高分屏的,不然真的很難看清標(biāo)簽和控制器,那么究竟發(fā)生了什么?

這個(gè)情況事實(shí)上是這樣的,因?yàn)槟鉨lurView使用的樣式是UIBlurEffectStyle.Light,所以導(dǎo)致它是白色的。這樣的話就不能產(chǎn)生意料之中的Vibrancy效果了。

在viewDidLoad方法中把blurEffect的初始化改為下面這樣:

let blurEffect = UIBlurEffect(style: .Dark)

這樣就改變而且增加了模糊視圖與背景之間的顏色反差。

構(gòu)建并運(yùn)行之后你就能看到一個(gè)稱心如意的Vibrancy效果了。

使用iOS8的虛化效果

更多

你可以在這里下載到完成后的工程。

至此你已經(jīng)知道如何手動模糊一張圖片了,也學(xué)會了如何進(jìn)行實(shí)時(shí)的模糊渲染,也會在你的App上簡單使用UIVisualEffectViews。

你所能使用的模糊技巧僅限于靜態(tài)圖片,所以圖片不會很生動而且不能實(shí)時(shí)的更新。不過使用UIBlurEffect卻可以進(jìn)行實(shí)時(shí)更新,這樣你就可以借助這個(gè)效果做一些奇妙的事,比如說做動畫。

同時(shí)你也可能會企圖把所有的東西都來模糊一下——請想想我們在教程的最初就提到過的事——使用虛化要適當(dāng)而且有節(jié)制。當(dāng)然對于Vibrancy也是這樣。

(按:這是一篇來自于Ray Wenderlich上有關(guān)于iOS 8 虛化效果的教程,在這里僅僅是一個(gè)概覽式的介紹,如果想了解更多,可自行參閱該網(wǎng)站的iOS 8 Feast專題)


向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI