iOS SDK詳解之模糊（毛玻璃）效果效果，iossdk

iOS SDK詳解之模糊（毛玻璃）效果效果，iossdk

原創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.}