iOS8的新特性：簡潔易用的毛玻璃效果

探尋iOS8的新亮點：毛玻璃效果的簡易實現

IOS8以前，apple官方並不建議開發者使用相似毛玻璃的模糊效果，也並無開放相關的接口，大部分的開發者是經過轉化CGImage這個類來實現毛玻璃的模糊效果，而且實現的效果也很優秀。在IOS8以後，蘋果官方新出了一個類UIVisualEffectView，經過這個類，實現毛玻璃效果變得垂手可得，並且效率很是之高，下面，咱們來介紹下這個類的簡單用法。

1、瞭解幾個類

一、UIVisualEffectView

這個類爲咱們提供了一個方便的接口，用來展現複雜的圖像效果。

二、UIVisualEffect

官方對這個類的解釋至關簡單，它沒有任何方法，只是充當一個幫助UIVisualEffectView建立的對象，是UIBlurEffect和UIVibrancyEffect的父類，或者能夠理解，它的功能至關於一個抽象類。

三、UIBlurEffect

這個類是建立模糊效果，也就是毛玻璃效果的類，能夠設置風格。

四、UIVibrancyEffect

從這個類的名字就能夠看出，這個類是UIBlurEffect的擴展，能夠建立出明亮的標籤的按鈕。

2、開始建立虛化的背景

首先，初始化一個UIVisualEffectView對象：

 

- (instancetype)initWithEffect:(UIVisualEffect *)effect;

這個方法裏面的參數是UIVisuaEffect對象，咱們先用UIBlueEffect的方式來建立：

 

+ (UIBlurEffect *)effectWithStyle:(UIBlurEffectStyle)style;

這個方法能夠設置一個風格參數，風格枚舉以下：

typedef NS_ENUM(NSInteger, UIBlurEffectStyle) {
    UIBlurEffectStyleExtraLight,//高亮的風格
    UIBlurEffectStyleLight,//亮化的風格
    UIBlurEffectStyleDark//暗化的風格
} ;

這些都作好以後，咱們須要給這個UIVisualEfffectView對象一個frame，而後直接加到咱們想要虛化的背景上，整體代碼以下：

  UIImageView * view = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    UIImage * img = [UIImage imageNamed:@"1.jpg"];
    UIVisualEffectView * effectView = [[UIVisualEffectView alloc]initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight]];
    //設置虛化度
    effectView.alpha=1.0;
    effectView.frame=CGRectMake(0, 0, self.view.frame.size.width, 200);
    view.image=img;
    [view addSubview:effectView];
    [self.view addSubview:view];

效果以下：

3、UIVisualEffectView的幾個屬性

 

@property (nonatomic, retain, readonly) UIView *contentView;

這個參數和咱們後面將要說的建立明亮的標籤和按鈕有關，這裏先很少介紹。

 

@property (nonatomic, copy, readonly) UIVisualEffect *effect;

得到UIVissualEffect對象

 

@property(nonatomic)                 CGFloat           alpha; 

這個參數和虛化的程度有關

4、在虛化的背景上建立顏色絢麗的標籤

咱們先來看一個效果，咱們在剛纔建立的虛化的背景上添加一個標籤，代碼以下：

UILabel * view2 = [[UILabel alloc]init];
    view2.text=@"注意看字體的顏色!";
    view2.font=[UIFont boldSystemFontOfSize:32];
    view2.frame=CGRectMake(0, 0,300, 100);
    UIImageView * view = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    UIImage * img = [UIImage imageNamed:@"1.jpg"];
    UIVisualEffectView * effectView = [[UIVisualEffectView alloc]initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight]];
    [effectView addSubview:view2];
    effectView.alpha=0.8;
    effectView.frame=CGRectMake(0, 0, self.view.frame.size.width, 200);
    view.image=img;
    [view addSubview:effectView];
    [self.view addSubview:view];

效果以下：

咱們換另外一種虛化效果來對背景進行虛化：

UILabel * view2 = [[UILabel alloc]init];
    view2.text=@"注意看字體的顏色!";
    view2.font=[UIFont boldSystemFontOfSize:32];
    view2.frame=CGRectMake(0, 0,300, 100);
    UIImageView * view = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    UIImage * img = [UIImage imageNamed:@"1.jpg"];
    UIVisualEffectView * effectView = [[UIVisualEffectView alloc]initWithEffect:[UIVibrancyEffect effectForBlurEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]]];
    [effectView.contentView addSubview:view2];
    effectView.alpha=0.8;
    effectView.frame=CGRectMake(0, 0, self.view.frame.size.width, 200);
    view.image=img;
    [view addSubview:effectView];
    [self.view addSubview:view];

效果以下：

如今能夠很明白的瞭解，UIBlurEffect是對整個背景進行虛化，UIVibrancyEffect是對添加的標籤等附件進行背景虛化。注意，這些附件，必須加在UIVisualEffectView的contentView裏，不然將不起任何做用。

5、一個小控件

經過上面的介紹，咱們能夠發現，在IOS8中建立一個毛玻璃效果是如此的容易，apple官方提供的類也是如此的強大，咱們很輕鬆就能夠實現實時變化虛化程度的動畫效果，這在之前是很是麻煩和低效的。可是apple還有一個忠告：莫要氾濫的使用虛化，致使不好的用戶體驗!

最後，和你們分享一個前兩天寫的小控件，實現的效果是仿IOS8中在桌面下拉會是背景漸變虛化，從頂部會滑出搜索框。以下：能夠當作一個demo來參考。

連接地址：http://d.cocoachina.com/code/detail/297393。

 

疏漏之處 歡迎指正

學習使用 歡迎轉載

 

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592