Swift — 模糊效果 & 動畫

讓我們一起看看如何在 iOS 實現模糊效果以及模糊動畫吧!

Jeremy Xue
Jeremy Xue ‘s Blog
Oct 18, 2020

--

Photo by mohammad alizade on Unsplash

前言:

最近工作室因為參與鐵人賽的關係,所以 iOS-Camp 在這次比賽中有共同開發一個類似 Trello 功能的 APP,而他們在這個 APP 中使用了許多關於模糊(毛玻璃)的畫面以及動畫效果。而我上一次做有關於模糊的效果已經是很久遠的事情了,所以這次來教大家如何在 iOS 上實現模糊效果以及模糊動畫。

❖ 實作:

模糊效果沒有想像中的困難,也不需要安裝額外的框架。在 iOS 中,我們有一個 UIVisualEffectView 的物件,它可以產生一個有特效的視圖,而我們可以把 UIBlurEffect 設置到其中來添加模糊效果。

首先先來看看原本畫面上的圖片(這邊建議可以選色彩繽紛一點的圖,因為真的很模糊):

接著,讓我們添加一個 UIVisualEffectView 在這個 imageView 上。

再次運行後,模糊效果應該會類似下圖這樣:

如果想要中途更改模糊效果的話,我們也可以透過設置 UIVisualEffectVieweffect 來改變它:

看看效果:

而如果想要移除 UIVisualEffectView 的模糊效果,可以將 effect 設置為 nil 即可。

❖ 模糊動畫:

而剛剛上述更改 UIVisualEffectVieweffect 的設置,也是可以動畫的。因此我們可以將它放置到動畫的區塊中,產生模糊效果的過渡動畫。

查看效果:

是不是非常容易呢?試試看在你的應用中添加上模糊效果吧!

--

--

Jeremy Xue
Jeremy Xue ‘s Blog

Hi, I’m Jeremy. [好想工作室 — iOS Developer]