iOS-毛玻璃效果

iOS8之后苹果提供了制作毛玻璃效果的API

就是这个UIVisualEffectView,用这个initWithEffect:去初始化,然后呢,他有两种效果继承自UIVisualEffect。这个父类不用管,什么也不做,主要看他的两个子类UIBlurEffect和UIVibrancyEffect。

UIBlurEffect : 这个是影响毛玻璃后面视图的

效果图:


1.png

UIVibrancyEffect : 这个是影响毛玻璃上的视图的

2.png

是不是很漂亮,做起来也不难呢。

先说毛玻璃下面的效果的做法。

你先初始化一个UIBlurEffect对象,他有三种风格

typedef NS_ENUM(NSInteger, UIBlurEffectStyle) {
UIBlurEffectStyleExtraLight,
UIBlurEffectStyleLight,
UIBlurEffectStyleDark
}

上面的效果都是用UIBlurEffectStyleLight做出来的

UIBlurEffectStyleExtraLight效果如下

3.png

UIBlurEffectStyleDark效果如下

4.png

然后呢用这个UIBlurEffect对象创建一个UIVisualEffectView对象。用你需要被虚化的视图添加这个UIVisualEffectView对象为子视图就可以了。

接着说毛玻璃上面的效果

创建一个UIVibrancyEffect对象,用之前创建的blur去初始化,然后创建一个UIVisualEffectView对象,用这个UIVibrancyEffect对象初始化,最后将你想要添加的子视图添加到UIVisualEffectView的contentView上就可以了。

完整代码如下:

UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.frame];
imageView.image = [UIImage imageNamed:@"pic"];
UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView *ev = [[UIVisualEffectView alloc] initWithEffect:blur];
ev.frame = self.view.frame;
[imageView addSubview:ev];
 
// UIVibrancyEffect效果
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blur];
UIVisualEffectView *ano = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
ano.frame = self.view.frame;
 
UILabel *label = [[UILabel alloc] init];
label.font = [UIFont systemFontOfSize:40];
label.frame = CGRectMake(100, 100, 400, 100);
label.text = @"Beautiful View";
[ev.contentView addSubview:ano];
[ano.contentView addSubview:label];
 
[self.view addSubview:imageView];

这里是链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在ios开发过程中,为了界面的美观,我们往往需要对一个图片进行模糊化处理,有一种朦胧美得感觉,就是所谓的毛玻璃效果...
    鲲鹏DP阅读 27,829评论 9 55
  • UIVisualEffect是一个继承自NSObject的创建视觉效果的基类,然而这个类除了继承自NSObje...
    _Yhz阅读 6,748评论 0 2
  • 一.UIToolBar iOS7 及之前的版本可以使用UIToolBar 快速定义自己的毛玻璃效果 二.UIVis...
    Krien阅读 10,414评论 0 4
  • 精读课文 1,从本篇文章中我学到的最重要的概念 A student konw how to enrich hims...
    141王成程阅读 143评论 5 3
  • 芳春啼莺娇态憨, 绿影摇竹翠空山。 香花飘云飞幽径, 暖水春风轻烟岚。 岚烟轻风春水暖, 径幽飞云飘花香。 山空翠...
    太古的花阅读 276评论 0 0