使用UIVisualEffectView為視圖添加特殊效果

iOSUIVisualEffectView視圖

在iOS 8后周偎,蘋(píng)果開(kāi)放了不少創(chuàng)建特效的接口,其中就包括創(chuàng)建毛玻璃(blur)的接口撑帖。

通常要想創(chuàng)建一個(gè)特殊效果(如blur效果)蓉坎,可以創(chuàng)建一個(gè)UIVisualEffectView視圖對(duì)象,這個(gè)對(duì)象提供了一種簡(jiǎn)單的方式來(lái)實(shí)現(xiàn)復(fù)雜的視覺(jué)效果胡嘿。這個(gè)可以把這個(gè)對(duì)象看作是效果的一個(gè)容器蛉艾,實(shí)際的效果會(huì)影響到該視圖對(duì)象底下的內(nèi)容,或者是添加到該視圖對(duì)象的contentView中的內(nèi)容衷敌。

我們舉個(gè)例子來(lái)看看如果使用UIVisualEffectView:

let bgView: UIImageView = UIImageView(image: UIImage(named: "visual"))

bgView.frame = self.view.bounds

self.view.addSubview(bgView)

let blurEffect: UIBlurEffect = UIBlurEffect(style: .Light)

let blurView: UIVisualEffectView = UIVisualEffectView(effect: blurEffect)

blurView.frame = CGRectMake(50.0, 50.0, self.view.frame.width - 100.0, 200.0)

self.view.addSubview(blurView)

這段代碼是在當(dāng)前視圖控制器上添加了一個(gè)UIImageView作為背景圖勿侯。然后在視圖的一小部分中使用了blur效果。

我們可以看到UIVisualEffectView還是非常簡(jiǎn)單的缴罗。需要注意是的助琐,不應(yīng)該直接添加子視圖到UIVisualEffectView視圖中,而是應(yīng)該添加到UIVisualEffectView對(duì)象的contentView中面氓。

另外兵钮,盡量避免將UIVisualEffectView對(duì)象的alpha值設(shè)置為小于1.0的值,因?yàn)閯?chuàng)建半透明的視圖會(huì)導(dǎo)致系統(tǒng)在離屏渲染時(shí)去對(duì)UIVisualEffectView對(duì)象及所有的相關(guān)的子視圖做混合操作舌界。這不但消耗CPU/GPU掘譬,也可能會(huì)導(dǎo)致許多效果顯示不正確或者根本不顯示。

我們?cè)谏厦婵吹缴氚瑁跏蓟粋€(gè)UIVisualEffectView對(duì)象的方法是UIVisualEffectView(effect: blurEffect)葱轩,其定義如下:

1

init(effect effect: UIVisualEffect)

這個(gè)方法的參數(shù)是一個(gè)UIVisualEffect對(duì)象。我們查看官方文檔藐握,可以看到在UIKit中靴拱,定義了幾個(gè)專(zhuān)門(mén)用來(lái)創(chuàng)建視覺(jué)特效的,它們分別是UIVisualEffect猾普、UIBlurEffect和UIVibrancyEffect袜炕。它們的繼承層次如下所示:

NSObject

| -- UIVisualEffect

| -- UIBlurEffect

| -- UIVibrancyEffect

UIVisualEffect是一個(gè)繼承自NSObject的創(chuàng)建視覺(jué)效果的基類(lèi),然而這個(gè)類(lèi)除了繼承自NSObject的屬性和方法外抬闷,沒(méi)有提供任何新的屬性和方法妇蛀。其主要目的是用于初始化UIVisualEffectView,在這個(gè)初始化方法中可以傳入U(xiǎn)IBlurEffect或者UIVibrancyEffect對(duì)象笤成。

一個(gè)UIBlurEffect對(duì)象用于將blur(毛玻璃)效果應(yīng)用于UIVisualEffectView視圖下面的內(nèi)容评架。如上面的示例所示。不過(guò)炕泳,這個(gè)對(duì)象的效果并不影響UIVisualEffectView對(duì)象的contentView中的內(nèi)容纵诞。

UIBlurEffect主要定義了三種效果,這些效果由枚舉UIBlurEffectStyle來(lái)確定培遵,該枚舉的定義如下:

enum UIBlurEffectStyle : Int {

case ExtraLight

case Light

case Dark

}

其主要是根據(jù)色調(diào)(hue)來(lái)確定特效視圖與底部視圖的混合浙芙。

與UIBlurEffect不同的是,UIVibrancyEffect主要用于放大和調(diào)整UIVisualEffectView視圖下面的內(nèi)容的顏色籽腕,同時(shí)讓UIVisualEffectView的contentView中的內(nèi)容看起來(lái)更加生動(dòng)嗡呼。通常UIVibrancyEffect對(duì)象是與UIBlurEffect一起使用,主要用于處理在UIBlurEffect特效上的一些顯示效果皇耗。接上面的代碼南窗,我們看看在blur的視圖上添加一些新的特效,如下代碼所示:

let vibrancyView: UIVisualEffectView = UIVisualEffectView(effect: UIVibrancyEffect(forBlurEffect: blurEffect))

vibrancyView.setTranslatesAutoresizingMaskIntoConstraints(false)

blurView.contentView.addSubview(vibrancyView)

var label: UILabel = UILabel()

label.setTranslatesAutoresizingMaskIntoConstraints(false)

label.text = "Vibrancy Effect"

label.font = UIFont(name: "HelveticaNeue-Bold", size: 30)

label.textAlignment = .Center

label.textColor = UIColor.whiteColor()

vibrancyView.contentView.addSubview(label)

vibrancy特效是取決于顏色值的郎楼。所有添加到contentView的子視圖都必須實(shí)現(xiàn)tintColorDidChange方法并更新自己万伤。需要注意的是,我們使用UIVibrancyEffect(forBlurEffect:)方法創(chuàng)建UIVibrancyEffect時(shí)呜袁,參數(shù)blurEffect必須是我們想加效果的那個(gè)blurEffect敌买,否則可能不是我們想要的效果。

另外阶界,UIVibrancyEffect還提供了一個(gè)類(lèi)方法notificationCenterVibrancyEffect虹钮,其聲明如下:

class func notificationCenterVibrancyEffect() -> UIVibrancyEffect!

這個(gè)方法創(chuàng)建一個(gè)用于通知中心的Today擴(kuò)展的vibrancy特效。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末膘融,一起剝皮案震驚了整個(gè)濱河市芜抒,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌托启,老刑警劉巖宅倒,帶你破解...
    沈念sama閱讀 206,723評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異屯耸,居然都是意外死亡拐迁,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén)疗绣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)线召,“玉大人,你說(shuō)我怎么就攤上這事多矮』貉停” “怎么了哈打?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,998評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)讯壶。 經(jīng)常有香客問(wèn)我料仗,道長(zhǎng),這世上最難降的妖魔是什么伏蚊? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,323評(píng)論 1 279
  • 正文 為了忘掉前任立轧,我火速辦了婚禮,結(jié)果婚禮上躏吊,老公的妹妹穿的比我還像新娘氛改。我一直安慰自己,他們只是感情好比伏,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,355評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布胜卤。 她就那樣靜靜地躺著,像睡著了一般赁项。 火紅的嫁衣襯著肌膚如雪瑰艘。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,079評(píng)論 1 285
  • 那天肤舞,我揣著相機(jī)與錄音紫新,去河邊找鬼。 笑死李剖,一個(gè)胖子當(dāng)著我的面吹牛芒率,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播篙顺,決...
    沈念sama閱讀 38,389評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼偶芍,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了德玫?” 一聲冷哼從身側(cè)響起匪蟀,我...
    開(kāi)封第一講書(shū)人閱讀 37,019評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎宰僧,沒(méi)想到半個(gè)月后材彪,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,519評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡琴儿,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,971評(píng)論 2 325
  • 正文 我和宋清朗相戀三年段化,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片造成。...
    茶點(diǎn)故事閱讀 38,100評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡显熏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出晒屎,到底是詐尸還是另有隱情喘蟆,我是刑警寧澤缓升,帶...
    沈念sama閱讀 33,738評(píng)論 4 324
  • 正文 年R本政府宣布,位于F島的核電站蕴轨,受9級(jí)特大地震影響港谊,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜尺棋,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,293評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望绵跷。 院中可真熱鬧膘螟,春花似錦、人聲如沸碾局。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,289評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)净当。三九已至内斯,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間像啼,已是汗流浹背俘闯。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,517評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留忽冻,地道東北人真朗。 一個(gè)月前我還...
    沈念sama閱讀 45,547評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像僧诚,于是被迫代替她去往敵國(guó)和親遮婶。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,834評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容