iOS自帶實現高斯模糊效果
阿新 • • 發佈:2019-01-05
引
什麼叫高斯模糊效果,通俗地說,就是毛玻璃效果,從iOS 7以來,就頻繁地被設計使用,如果用得好,效果會顯得非常的好。我們來看一個例子:
圖中下面一小部分就是高斯模糊效果。要實現也很簡單,iOS自身就支援這種效果。
iOS 7 UIToolbar
iOS 7開始,支援用UIToolbar來實現這種效果,程式碼很簡單:
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds .size.height)];
imageView.image = [UIImage imageNamed:@"neo.jpeg"];
[self.view addSubview:imageView];
/* UIBarStyle列舉:
UIBarStyleDefault
UIBarStyleBlack
UIBarStyleBlackOpaque
UIBarStyleBlackTranslucent
*/
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0 , imageView.frame.size.height * 0.7, imageView.frame.size.width, imageView.frame.size.height * 0.3)];
toolbar.barStyle = UIBarStyleBlackTranslucent;
[self.view addSubview:toolbar];
這個style實現出來就是這個效果:
事實上除了UIBarStyleDefault風格是白亮的模糊不太好看外,其他三種風格我都看不出有什麼差別。
我們可以看一下UI層級:
事實上就是在原本的圖片檢視上加了一層UIVisualEffectView,等於是覆蓋了一塊毛玻璃,很好理解,也很好用。
iOS 8 UIBlurEffect
從iOS 8開始,蘋果開始支援一個新的實現方式——UIBlurEffect,蘋果也推薦這種方式,當然如果你的應用要支援iOS 7,那還是用上一種。
這種方式的程式碼一樣很簡單,在程式碼中就直接用到了我們上面層級中看到的UIVisualEffectView,程式碼如下:
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
imageView.image = [UIImage imageNamed:@"neo.jpeg"];
[self.view addSubview:imageView];
/* UIBlurEffectStyle列舉
UIBlurEffectStyleRegular
UIBlurEffectStyleLight
UIBlurEffectStyleDark
UIBlurEffectStyleProminent
UIBlurEffectStyleExtraLight
*/
UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
effectView.frame = CGRectMake(0, imageView.frame.size.height * 0.7, imageView.frame.size.width, imageView.frame.size.height * 0.3);
[self.view addSubview:effectView];
確實這種方式的效果更加自然:
再看一下UI層級:
對比一下兩種實現方式,其實是不一樣的,感興趣的可以研究一下原理。
我們把風格換成UIBlurEffectStyleDark後是這樣的:
和UIToolbar的實現效果相比的話,要說沒區別也有一點區別,總之就是覺得好看一些,所以還是推薦用這種方式。
結
不得不說毛玻璃(高斯模糊)效果配上好圖片後的效果真的很贊,我可以玩很久,其實實現方式真的很簡單,大家可以多多應用到自己的應用中去,相信一定會加分不少!