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


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com