研究 UI 元件：Visual Effect View with Blur
Visual Effect View with Blur
一種（視覺）材質元件，可以作為其它視圖的前景視圖，來達到模糊效果。這種效果可以讓使用者更專注於當前想要表達的畫面。
如何加入 Visual Effect View with Blur 元件
點選 Object Library > 搜尋欄上輸入 Visual Effect View with Blur
Blur Style 屬性
這裡 Stroyboard 準備了許多風格可以選擇，每一種效果都不太一樣，通常根據畫面的需求使用。
由於這種材質元件需要作為其它視圖元件的前景，因此下面用圖像作為背景視圖，然後用泳裝阿庫婭來看看幾種效果。（這次就不放元件紅色方框了！）
- Regular 是預設的風格。
- Extra Light 風格，前景視圖（模糊效果）會比背景視圖（人物）稍微明亮一點。
- Light 風格，前景視圖（模糊效果）和背景視圖（人物）是一樣的明亮度。
- Dark 風格，前景視圖（模糊效果）會比背景視圖（人物）的亮度還要暗上許多。
Visual Effect View with Blur 設計
其實，上面的幾張圖片為了呈現模糊材質元件的效果，故意將其縮小，然後擺放在人物圖片之上，作為遮蔽人物圖片的前景視圖。
這種用法其實與官方推薦的使用方式背道而馳。
因為，模糊效果主要是透過模糊背景的內容，來強調前景的內容。
這邊推薦詳細閱讀官方說明：
Visual Effect View with Blur 元件的簡單應用
其實這種元件很常出現在我們的眼前，像是 iPhone 用來設定 Wifi、藍芽、螢幕亮度等的下拉式菜單 “控制中心”，就是一個經典的應用。它讓我們專心於調整各種設定。
下面則是模擬了一下這種效果，主要是將模糊材質元件的大小設計的和 iPhone 的螢幕大小一樣，從而達成完全遮蔽背景的效果。
然後將元件放進模糊材質元件的 View 裏面，達成想要讓使用者專注於前景內容的效果。
最後，這邊想說明一件事情，
官方有說明，請不要將元件的 alpha 設置低於 1。
When using the
UIVisualEffectViewclass, avoid alpha values that are less than 1.
一開始，摸索的時候，以為是要去調整 alpha 達成下圖這個美好的應用。因此就設計了一個滑塊元件來玩 alpha 值。
但其實完全搞錯用法了！！！
這個元件的選項看起來單純，但應用方式意外地要花費很大的心力學習。
其實這個元件效果有兩種：
- UIBlurEffect 就是這篇文章所展示的。
- UIVibrancyEffect 則是另外一種。
