iOS SDK详解之模糊（毛玻璃）效果效果

原创blog，转载请注明出处

http://blog.csdn.net/hello_hwc?viewmode=list

在iOS 8 之前，想要实现模糊效果，一般会使用一些Github库，当然自己定制也可以，其原理就是用Core Image进行一些数字图像处理（因为电子出身，本课的时候做过，用矩阵来做）。不过，到了iOS 8之后，这一切变的非常简单，因为Apple公开了之前的几个私有API。

Demo效果

三种Blur

Vibrancy（也就是在Blur上加一些想要强调的部分）

Demo下载链接

http://download.csdn.net/detail/hello_hwc/8678439

添加Blur

原理很简单

• UIBlurEffect初始化一个blurEffect
• 制定一个VisualEffectView，这个View定义了blur的区域
• 把这个View作为Subview添加到想要blur的view上

    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *bluredEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    [bluredEffectView setFrame:  CGRectInset(self.imageview.bounds, 20, 20);
];
    bluredEffectView.layer.cornerRadius = 15;
    bluredEffectView.layer.masksToBounds = YES;
    [self.imageview addSubview:bluredEffectView];

其中Blur有三种，对应上文Demo图中的三种：

• dark
• light
• extraLihgt

几点要注意的是

1. 不要对visualView设置alpha < 1

2. 可以对visualView设置Mask，来定制模糊的区域

添加Vibrancy

添加Vibrancy的原理就是在Blur的基础上再添加一个VisualView，并且在这个VisualView的contentView上添加想要的控件

   UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *bluredEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    [bluredEffectView setFrame:CGRectMake(30,self.imageview.bounds.size.height - 50,self.imageview.bounds.size.width - 60, 40)];
    bluredEffectView.layer.cornerRadius = 15;
    bluredEffectView.layer.masksToBounds = YES;
    [self.imageview addSubview:bluredEffectView];

    UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
    UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
    [vibrancyEffectView setFrame:self.imageview.bounds];
    [bluredEffectView.contentView addSubview:vibrancyEffectView];

    UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(0,0,self.imageview.bounds.size.width - 60, 40)];
    label.text = @"Highlight";
    label.textAlignment = NSTextAlignmentCenter;
    label.textColor = [UIColor blackColor];
    [label setTextColor:[UIColor blackColor]];
    [vibrancyEffectView.contentView addSubview:label];

效果

简单介绍下我写的Demo的一些设计原理

由两个数组保存Model

-(NSArray *)blurEffectArray{
    return @[[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark],
             [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight],
             [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight],
             ];
}
-(NSArray *)titleArray{
    return @[@"Dark",@"Light",@"ExtraLight"];
}

由CurrentIndex来获取/设定当前选择效果，在CurrentIndex的set函数里进行Model和View的同步

-(void)setCurrentIndex:(NSInteger)currentIndex{
    if (self.visualview != nil) {
        [self.visualview removeFromSuperview];
    }
    self.visualview = [[UIVisualEffectView alloc] initWithEffect:[[self blurEffectArray] objectAtIndex:currentIndex]];
    self.visualview.frame = CGRectInset(self.imageview.bounds, 20, 20);
    self.visualview.layer.cornerRadius = 15;
    self.visualview.layer.masksToBounds = YES;
    self.navigationItem.title = [[self titleArray] objectAtIndex:currentIndex];
    [self.imageview addSubview:self.visualview];
    _currentIndex = currentIndex;

}

手势触摸，只需要改变CurrentIndex即可

- (IBAction)swipt:(UISwipeGestureRecognizer *)sender {
    self.currentIndex = (self.currentIndex + 1)%[self blurEffectArray].count;
}

初始化的时候，指定最初的Index

- (void)viewDidLoad {
    [super viewDidLoad];
    self.imageview.userInteractionEnabled = YES;
    self.currentIndex = 0;
    // Do any additional setup after loading the view, typically from a nib.
}