天天看點

IOS8的新特性:簡潔易用的毛玻璃效果

ios8之前,apple官方并不建議開發者使用類似毛玻璃的模糊效果,也并沒有開放相關的接口,大部分的開發者是通過轉化cgimage這個類來實作毛玻璃的模糊效果,并且實作的效果也很優秀。在ios8之後,蘋果官方新出了一個類uivisualeffectview,通過這個類,實作毛玻璃效果變得輕而易舉,而且效率非常之高,下面,我們來介紹下這個類的簡單用法。

1、uivisualeffectview

這個類為我們提供了一個友善的接口,用來展示複雜的圖像效果。

2、uivisualeffect

官方對這個類的解釋相當簡單,它沒有任何方法,隻是充當一個幫助uivisualeffectview建立的對象,是uiblureffect和uivibrancyeffect的父類,或者可以了解,它的功能相當于一個抽象類。

3、uiblureffect

這個類是建立模糊效果,也就是毛玻璃效果的類,可以設定風格。

4、uivibrancyeffect

從這個類的名字就可以看出,這個類是uiblureffect的擴充,可以建立出明亮的标簽的按鈕。

首先,初始化一個uivisualeffectview對象:

- (instancetype)initwitheffect:(uivisualeffect *)effect;

這個方法裡面的參數是uivisuaeffect對象,我們先用uiblueeffect的方式來建立:

+ (uiblureffect *)effectwithstyle:(uiblureffectstyle)style;

這個方法可以設定一個風格參數,風格枚舉如下:

<a href="http://my.oschina.net/u/2340880/blog/405276#">?</a>

1

2

3

4

5

<code>typedef</code> <code>ns_enum(nsinteger, uiblureffectstyle) {</code>

<code>    </code><code>uiblureffectstyleextralight,</code><code>//高亮的風格</code>

<code>    </code><code>uiblureffectstylelight,</code><code>//亮化的風格</code>

<code>    </code><code>uiblureffectstyledark</code><code>//暗化的風格</code>

<code>} ;</code>

這些都做好之後,我們需要給這個uivisualefffectview對象一個frame,然後直接加到我們想要虛化的背景上,總體代碼如下:

6

7

8

9

<code>  </code><code>uiimageview * view = [[uiimageview alloc]initwithframe:cgrectmake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];</code>

<code>    </code><code>uiimage * img = [uiimage imagenamed:@</code><code>"1.jpg"</code><code>];</code>

<code>    </code><code>uivisualeffectview * effectview = [[uivisualeffectview alloc]initwitheffect:[uiblureffect effectwithstyle:uiblureffectstyleextralight]];</code>

<code>    </code><code>//設定虛化度</code>

<code>    </code><code>effectview.alpha=1.0;</code>

<code>    </code><code>effectview.frame=cgrectmake(0, 0, self.view.frame.size.width, 200);</code>

<code>    </code><code>view.image=img;</code>

<code>    </code><code>[view addsubview:effectview];</code>

<code>    </code><code>[self.view addsubview:view];</code>

效果如下:

IOS8的新特性:簡潔易用的毛玻璃效果

@property (nonatomic, retain, readonly) uiview *contentview;

這個參數和我們後面将要說的建立明亮的标簽和按鈕有關,這裡先不多介紹。

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

獲得uivissualeffect對象

@property(nonatomic)                 cgfloat           alpha; 

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

我們先來看一個效果,我們在剛才建立的虛化的背景上添加一個标簽,代碼如下:

10

11

12

13

<code>uilabel * view2 = [[uilabel alloc]init];</code>

<code>    </code><code>view2.text=@</code><code>"注意看字型的顔色!"</code><code>;</code>

<code>    </code><code>view2.font=[uifont boldsystemfontofsize:32];</code>

<code>    </code><code>view2.frame=cgrectmake(0, 0,300, 100);</code>

<code>    </code><code>uiimageview * view = [[uiimageview alloc]initwithframe:cgrectmake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];</code>

<code>    </code><code>[effectview addsubview:view2];</code>

<code>    </code><code>effectview.alpha=0.8;</code>

IOS8的新特性:簡潔易用的毛玻璃效果

我們換另一種虛化效果來對背景進行虛化:

<code>    </code><code>uivisualeffectview * effectview = [[uivisualeffectview alloc]initwitheffect:[uivibrancyeffect effectforblureffect:[uiblureffect effectwithstyle:uiblureffectstyledark]]];</code>

<code>    </code><code>[effectview.contentview addsubview:view2];</code>

IOS8的新特性:簡潔易用的毛玻璃效果

現在可以很明白的了解,uiblureffect是對整個背景進行虛化,uivibrancyeffect是對添加的标簽等附件進行背景虛化。注意,這些附件,必須加在uivisualeffectview的contentview裡,否則将不起任何作用。

通過上面的介紹,我們可以發現,在ios8中建立一個毛玻璃效果是如此的容易,apple官方提供的類也是如此的強大,我們很輕松就可以實作實時變化虛化程度的動畫效果,這在以前是非常麻煩和低效的。但是apple還有一個忠告:莫要泛濫的使用虛化,導緻很差的使用者體驗!

最後,和大家分享一個前兩天寫的小控件,實作的效果是仿ios8中在桌面下拉會是背景漸變虛化,從頂部會滑出搜尋框。如下:可以當做一個demo來參考。

IOS8的新特性:簡潔易用的毛玻璃效果

繼續閱讀