iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
自我挑戰組

打造專案管理 iOS App 系列 第 20

安能取熊掌而捨魚 模糊畫面運用

  • 分享至 

  • xImage
  •  

安能取熊掌而捨魚 模糊畫面運用 UIVisualEffectView

UIVisualEffectView 是一種模糊畫面的運用,首先我們先來看看他是什麼?

在 iOS 7 出來一個背景模糊的效果, Apple 官方的 sample code 則有提供怎麼使用 vImage, Quartz 來實作這個效果。接著在 iOS 8 出來之後,則提供了 UIVisualEffectView

UIVisualEffectView 繼承於 UIView

UIVisualEffectView 繼承於 UIView 可以疊加的 class 的 objects ,除了 UIView 之外就還有 UIImageView 等比較常用會用來加上模糊效果,因此可以更加容易達到這個效果。

官方說明了一些注意事項:

請避免小於 1 的 Alpha 值

建立部分透明的檢視會導致系統在螢幕外渲染過程中合併檢視和所有其他關聯的子檢視。 UIVisual效果檢視物件需要合併為內容的一部分,以便看起來正確。在視覺效果檢視或任何超視圖上將 Alpha 設置為小於 1 會導致許多效果看起來不正確或未顯示。

接下來讓我們來實作吧,

 let blurEffect = UIBlurEffect(style: .systemUltraThinMaterialDark)

實例化一個模糊效果。

你不難發現,初始化時可以選擇毛玻璃樣式

在這裡你可以選擇不同高斯模糊,也可以白玻璃,黑玻璃。非常多的選擇。

let visualEffectView = UIVisualEffectView(effect: blurEffect)

實例化 visualEffectView,在初始化時選擇上一個實例化的效果。

以上是生成毛玻璃的基本操作。


擴充: static func + 圓角

class  GlassFactory{
    
    static func makeGlass() -> UIVisualEffectView{
        let blurEffect = UIBlurEffect(style: .systemUltraThinMaterialDark)
        let visualEffectView = UIVisualEffectView(effect: blurEffect)
        visualEffectView.frame = CGRect(x:0, y:0, width: ScreenSize.width.value, height: ScreenSize.height.value)
        visualEffectView.layer.cornerRadius = ScreenSize.height.value * 0.01
        visualEffectView.clipsToBounds = true
        return visualEffectView
    }
}

運用這個功能,可以更方便地在想要的地方生成這個毛玻璃。

是不是很酷呢?

資料來源

http://blog.kumaya.co/2014/08/13/creating-blur-effect-in-ios-8/


上一篇
安能取熊掌而捨魚? UIActivityIndicatorView
下一篇
安能取熊掌而捨魚 SnapKit 進階用法(重做約束)
系列文
打造專案管理 iOS App 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言