在iOS 8后,新增了創(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)容.
一.純代碼實(shí)現(xiàn):
在當(dāng)前視圖控制器上添加了一個(gè)UIImageView作為背景圖胯陋。然后在視圖的一小部分中使用了blur效果
OC代碼:
UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
imageView.image = [UIImage imageNamed:@"a"];
[self.view addSubview:imageView];
// Blur effect 模糊效果
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
blurEffectView.frame = self.view.bounds;
[self.view addSubview:blurEffectView];
// Vibrancy effect 生動(dòng)效果
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
vibrancyEffectView.frame = self.view.bounds;
// 效果字體
UILabel *label = [[UILabel alloc] init];
label.text = @"sk666";
label.font = [UIFont systemFontOfSize:72.0f];
[label sizeToFit];
label.center = self.view.center;
// 添加label到the vibrancy view的contentView上
[vibrancyEffectView.contentView addSubview:label];
// 添加vibrancy view 到 blur view的contentView上
[blurEffectView.contentView addSubview:vibrancyEffectView];
Swift代碼:
let imageView = UIImageView(frame: view.bounds)
imageView.image = UIImage(named: "a")
view.addSubview(imageView)
// Blur Effect 模糊效果
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
//添加到當(dāng)前view上
view.addSubview(blurEffectView)
// Vibrancy Effect 生動(dòng)效果
let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
vibrancyEffectView.frame = view.bounds
// 效果字體
let label = UILabel()
label.text = "sk666"
label.font = UIFont.systemFontOfSize(72.0)
label.sizeToFit()
label.center = view.center
//添加label到vibrancyView的contentView上
vibrancyEffectView.contentView.addSubview(label)
//添加vibrancyView到blurView的contentView上
blurEffectView.contentView.addSubview(vibrancyEffectView)
注意:
- 不要直接添加子視圖到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)致許多效果顯示不正確或者根本不顯示。
效果圖:
二.Stroyboar實(shí)現(xiàn)效果
Visual Effect Views with Blur
- 1.拖入Visual Effect Views with Blur控件
- 2.Stroyboar層次結(jié)構(gòu)
注意:這里要展示的子控件imageView添加到UIVisualEffectView的contentView上
Visual Effect Views with Blur and Vibrancy
- 1.拖入Visual Effect Views with Blur and Vibrancy控件
-
2.Stroyboar層次結(jié)構(gòu)
a6.png
效果圖:
- 注意:
如果只是想要毛玻璃效果的文字,需要將第一層Visual Effect Views,的vibrancy屬性打鉤
操作:
效果圖:
三.UIVisualEffectView構(gòu)造
查看官方文檔盟萨,可以看到在UIVisualEffectView.h中凉翻,定義了3個(gè)專(zhuān)門(mén)用來(lái)創(chuàng)建視覺(jué)特效的類(lèi),它們分別是UIVisualEffect
捻激、UIBlurEffect
和UIVibrancyEffect
噪矛。
繼承關(guān)系:
UIVisualEffect
繼承自 NSObject.
UIVisualEffect
有兩個(gè)子類(lèi):UIBlurEffect
和UIVibrancyEffect
1.
UIVisualEffect
是一個(gè)繼承自NSObject的創(chuàng)建視覺(jué)效果的基類(lèi),然而這個(gè)類(lèi)除了繼承自NSObject的屬性和方法外铺罢,沒(méi)有提供任何新的屬性和方法艇挨。其主要目的是用于初始化UIVisualEffectView
,在這個(gè)初始化方法中可以傳入UIBlurEffect
或者UIVibrancyEffect
對(duì)象韭赘。-
2.
UIBlurEffect
對(duì)象用于將blur(毛玻璃)效果應(yīng)用于UIVisualEffectView
視圖下面的內(nèi)容缩滨。如上面的示例所示。注意:這個(gè)對(duì)象的效果并不影響
UIVisualEffectView
對(duì)象的contentView中的內(nèi)容泉瞻。
UIBlurEffect脉漏,由枚舉UIBlurEffectStyle來(lái)確定三種效果,主要是根據(jù)色調(diào)(hue)來(lái)確定特效視圖與底部視圖的混合袖牙。該枚舉的定義如下:
typedef NS_ENUM(NSInteger, UIBlurEffectStyle) {
UIBlurEffectStyleExtraLight, //額外亮
UIBlurEffectStyleLight, // 亮
UIBlurEffectStyleDark // 暗
} NS_ENUM_AVAILABLE_IOS(8_0);
- 3.
UIVibrancyEffect
主要用于放大和調(diào)整UIVisualEffectView視圖下面的內(nèi)容的顏色侧巨,同時(shí)讓UIVisualEffectView
的contentView中的內(nèi)容看起來(lái)更加生動(dòng)。通常UIVibrancyEffect對(duì)象是與UIBlurEffect一起使用鞭达,主要用于處理在UIBlurEffect特效上的一些顯示效果司忱。
vibrancy
特效是取決于顏色值的。所有添加到contentView的子視圖都必須實(shí)現(xiàn)tintColorDidChange方法并更新自己畴蹭。
需要注意的是坦仍,我們使用
UIVibrancyEffect(forBlurEffect:) //Swift
或者
+ (UIVibrancyEffect *)effectForBlurEffect:(UIBlurEffect *)blurEffect; //OC
方法創(chuàng)建UIVibrancyEffect時(shí),
參數(shù)blurEffect必須是我們想加效果的那個(gè)blurEffect叨襟,否則可能不是我們想要的效果繁扎。