美文网首页ios
iOS通过几种不同的方式实现毛玻璃效果

iOS通过几种不同的方式实现毛玻璃效果

作者: 佳哥无敌啦 | 来源:发表于2016-09-22 11:27 被阅读956次

需求

在我们开发中有时会遇到这样的要求,弹出一个半透明层,这样可以看到后面的页面,使得我们的APP层次更加清晰,那么如何实现这一半透明层呢,我用了4种方式,接下来一一呈现。

解决方案

这里有代码的Demo

首先我们看一下原图:


origin.png

1.UIBlurEffect

先看效果图:


UIBlurEffect.png

UIBlurEffect是iOS8以后才出的,那么如果系统还没升级到8呢,虽然这是极少数,但是我们在开发中基本都是要考虑到的,对于这类用户,我们可以用UIToolbar来解决,下面是实现的代码:

if ([[UIDevice currentDevice].systemVersion doubleValue] >= 8.0f) {
            
            UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
            UIVisualEffectView *BlurView = [[UIVisualEffectView alloc] initWithEffect:blur];
            ((UIVisualEffectView *)BlurView).frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
            BlurView.alpha = 0.7;
            [self addSubview:BlurView];
            [self sendSubviewToBack:BlurView];
            
}else {
            
            UIToolbar *BlurView = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
            ((UIToolbar *)BlurView).barStyle = UIBarStyleBlack;
            BlurView.alpha = 0.7;
            [self addSubview:BlurView];
            [self sendSubviewToBack:BlurView];
            
        }

2.GPUImage

先看效果图:


GPUImage.png

GPUImage是一款功能强大的库,其中的各种滤镜效果真的让人眼花缭乱,用它做一个半透明层确实很轻松,不过要想用得好还是要下一番功夫的,代码也很简单,我们首先创建一个继承自GPUImageView的View,然后加上如下代码就可以了:

GPUImageGaussianBlurFilter * blurFilter = [[GPUImageGaussianBlurFilter alloc] init];
GPUImageView *filterView = (GPUImageView *)self;
[blurFilter addTarget:filterView];

3.苹果自己封装的模糊效果

先看效果图:

Apple.png
如果仅仅是要做一个半透明的模糊效果的话,有可能会嫌GPUImage太庞大,其实苹果的官方Demo中自己就封装了一个,网址在这里,如果网址失效的话,可以在Apple Developer中搜索UIImageEffects,将UIImageEffects的.h和.m文件导进来,只要加上如下代码,就可以实现效果了:
@property (strong, nonatomic) CALayer *blurLayer;
self.blurLayer = [CALayer layer];
self.blurLayer.frame = self.bounds;
[self.layer addSublayer:self.blurLayer];
UIImage *image = [UIImageEffects imageByApplyingLightEffectToImage:nil];
self.blurLayer.contents = (__bridge id)(image.CGImage);

4.添加一个半透明的controller

先看效果图:


BlurController.png

上面三种都是添加了一个View,可能有人会想要弹出一个半透明的controller,其实也比较简单,添加如下代码即可:

BlurViewController *blurController = [[BlurViewController alloc]initWithNibName:@"BlurViewController" bundle:[NSBundle mainBundle]];
blurController.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
blurController.modalPresentationStyle = UIModalPresentationOverCurrentContext|UIModalPresentationFullScreen;
        
[self presentViewController:blurController animated:YES completion:^{
    blurController.view.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.5];
}];

UIModalPresentationOverCurrentContext也是iOS8以后出的,那么如果之前的版本该怎么办呢,参考这里

最后还是代码的Demo

相关文章

  • iOS通过几种不同的方式实现毛玻璃效果

    需求 在我们开发中有时会遇到这样的要求,弹出一个半透明层,这样可以看到后面的页面,使得我们的APP层次更加清晰,那...

  • 实现div毛玻璃背景

    原文在我的博客☞实现div毛玻璃背景 毛玻璃效果 ios里毛玻璃效果的使用非常多,本文介绍一个实现div毛玻璃背景...

  • 毛玻璃效果的几种实现方式

    在开发过程中,我们有时候会遇到一些需求,就是对图片进行处理,达到毛玻璃效果。 处理方式一: 直接用UIToolBa...

  • iOS之原生毛玻璃效果

    iOS 8之后 iOS提供了实现原生毛玻璃效果的接口,使用起来也非常方便,先简单看看效果图 使用方法 在添加毛玻璃...

  • iOS 毛玻璃效果快速实现

    在 iOS8.0 之后,苹果新增了一个类 UIVisualEffectView,通过这个类来实现毛玻璃效果效率非常...

  • 安卓模糊效果探讨

    在项目中我们或多或少的需要根据产品的要求,实现类似于ios的毛玻璃效果。在ios中毛玻璃的实现,比较简单,系统提供...

  • iOS-小Demo--下拉放大顶部图片+毛玻璃效果

    记录一个简单的下拉顶部图片放大的效果,再加个毛玻璃! iOS8之后毛玻璃效果实现:利用 UIVisualEffec...

  • Html开发-安卓毛玻璃无效果解决办法

    毛玻璃实现代码: filter:blur(value); value为毛玻璃模糊程度。 该效果在Ios开无任何问...

  • iOS实现App之间的内容分享

    前言 我们在iOS平台上想要实现不同App之间的内容分享一般有几种常用方式: 第一种是通过AirDrop实现不同设...

  • ios毛玻璃效果

    ios实现磨玻璃在各个系统上都有所不同,新系统总会有比旧系统更好的方式去实现毛玻璃 iOS 6及以下系统,可以生成...

网友评论

    本文标题:iOS通过几种不同的方式实现毛玻璃效果

    本文链接:https://www.haomeiwen.com/subject/dmlzettx.html