iOS开发者iOS核心动画iOSer 的自我修养

iOS-毛玻璃效果详解

2016-07-17  本文已影响4612人  鲲鹏DP

在ios开发过程中，为了界面的美观，我们往往需要对一个图片进行模糊化处理，有一种朦胧美得感觉，就是所谓的毛玻璃效果。在GitHub上不乏实现毛玻璃效果的三方框架，这里就不做过多介绍。现在主要谈谈苹果自己提供的两种实现毛玻璃效果的类，UIToolBar和UIVisuaEffectView。

UIToolBar

UIToolBar在IOS 2.0就已经出现，可以快速实现毛玻璃效果。简单易懂，但是效果单一，系统只提供了两种bayStyle. UIBarStyleDefault和UIBarStyleBlack 。

Snip20160717_9.png Snip20160717_8.png 
//背景图片
  UIImageView *backImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"Snip20160714_17"]];
    backImageView.frame = self.view.bounds;
    [self.view addSubview:backImageView];
//UIToolBar:加了三层遮盖
        UIToolbar *bar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 100,375, 300)];
        bar.barStyle = UIBarStyleDefault;
        bar.alpha = 0.8;
        [self.view addSubview:bar];

UIVisuaEffectView

UIVisuaEffectView是苹果从IOS8.0开始提供的可实现毛玻璃效果(blur)的控件。相比以前的UIToolBar，UIVisuaEffectView的功能更加强大，能实现更加复杂的效果。 利用UIVisuaEffectView实现毛玻璃效果，首先需要对UIVisualEffect，UIBlurEffect、UIVibrancyEffect 和UIVisuaEffectView有一个正确的认识：

1). UIBlurEffect


//设置背景图片
UIImageView *backImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"Snip20160714_17"]];

backImageView.frame = self.view.bounds;

[self.view addSubview:backImageView];

//设置UIVisualEffectView

UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *visualView = [[UIVisualEffectView alloc]initWithEffect:blurEffect];

visualView.frame = CGRectMake(0, 100,375, 300);

[self.view addSubview:visualView];
//UIBlurEffect的effectWithStyle有三种：UIBlurEffectStyleExtraLight/UIBlurEffectStyleLight/UIBlurEffectStyleDark
Snip20160717_1.png Snip20160717_3.png

可以看出使用UIBlurEffect 其实是在图片上面添加了三层遮盖。所以，如果图片放在了UIVisualEffectView的上面就没有效果。

2). UIVibrancyEffect

//设置背景图片
    UIImageView *backImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"Snip20160714_17"]];
    backImageView.frame = self.view.bounds;
    [self.view addSubview:backImageView];
    //UIVisualEffectView
    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
    UIVisualEffectView *visualView = [[UIVisualEffectView alloc]initWithEffect:vibrancyEffect];
    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    [visualView.contentView addSubview:redView];
    visualView.frame = CGRectMake(0, 100,375, 300);
    redView.frame = visualView.bounds;
    [self.view addSubview:visualView];

通过改变contentView中subView，可以实现不同更加生动的效果。

Snip20160717_5.png Snip20160717_6.png

补充

render the region 'fromRect' of image 'image' into a temporary buffer using the context, then create and return a new CoreGraphics image with  the results.

#import "ViewController.h"

@interface ViewController ()
@property (strong, nonatomic) IBOutlet UIImageView *iconImageView;
@property (strong, nonatomic) IBOutlet UIImageView *blurImageVIew;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //1.获取CIIamge对象
    CIImage * ciIamge = [CIImage imageWithCGImage:_iconImageView.image.CGImage];
//    //2.创建滤镜对象
    CIFilter *filter = [CIFilter filterWithName:@"CIMotionBlur"
                                  keysAndValues:kCIInputImageKey, ciIamge, nil];
    // 获取绘制上下文
    CIContext *context = [CIContext contextWithOptions:nil];
   // 渲染并输出CIImage
    CIImage *outputImage = [filter outputImage];
    // 创建CGImage句柄
    CGImageRef cgImage = [context createCGImage:outputImage
                                       fromRect:[outputImage extent]];
    self.blurImageVIew.image =[UIImage imageWithCGImage:cgImage];
    self.blurImageVIew.contentMode = UIViewContentModeScaleAspectFill;
    // 释放CGImage句柄
    CGImageRelease(cgImage);
//    self.blurImageVIew.image = self.iconImageView.image;
}
Snip20160827_4.png 使用Core Image.png
上一篇下一篇

猜你喜欢

热点阅读