天天看点

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的新特性:简洁易用的毛玻璃效果

继续阅读