Swift — 實作 The UX in Motion Manifesto 的動畫效果 Part.5

Obscuration（朦朧化）、Parallax（視差）

前言：

如何用 Swift 打造你的第一個區塊鏈 App

不小心荒廢了幾天再研究上面這邊文章「 如何用 Swift 打造你的第一個區塊鏈 APP 」，順便也研究了一下區塊鏈與比特幣的架構與內容，當然不免俗的也順便也玩壞人家的 Demo 以及找 Bug （ 嘿嘿嘿 😈😈😈 。等我研究好了我會將實作區塊鏈的方式分享給大家。

好啦，拉回主題「 動畫原理 」！

那麼我們的動畫效果也剩下最後四種，之後這四種我會用高質感的呈現方式，讓大家體驗到感覺比較精緻的感覺～

Obscuration（朦朧化）

讓使用者可以自行在空間裡，依靠非主要視覺階層的物體或場景找到方向。

iPhone 手機中的模糊效果

注意：透明度 不等於 模糊效果

此種方式常用的方式為，將畫面「 後方 」不重要的資訊給模糊化，只顯示前面重要的視窗或功能。藉由這種效果告訴使用者目前可使用畫面或是功能，區分兩者的「 層級 」增進易用性。

Swift 中也有提供模糊的效果的方式，接下來讓我們做做模糊化的效果，首先我們宣告一個變數，其類型為 UIVisualEffectView：

var blurEffectView:UIVisualEffectView!

如此一來，我們呼叫這個方法的模糊化動畫效果如下：

模糊化動畫效果

當然只有這樣還不夠，所以我們加上我們的項目清單在上方，藉由模糊效果讓使用者知道目前的重點在於我們的「 項目清單 」上：

項目清單顯示畫面

不免俗的我們還是要為這個項目清單上個動畫，因為我們這個項目清單是使用 stackView 包起來的。因此我想要其中的每個 Label 能夠依照他們的順序個別出現，所以我們會使用到動畫中的 delay 這個屬性：

如此一來我的開啟項目清單的動畫效果如下：

項目清單配合模糊化動畫效果

當然模糊特效不只有一種，有興趣的人可以玩一下其他種效果，雖然有些效果看起來大同小異，我的 Demo 中也有提供所有模糊效果的展示：

五種不同的模糊效果展示

Parallax（視差）

當使用者捲動畫面時，在視覺平面上創造空間階層

說真的我一開始沒看出來，也不懂這效果到底是什麼，其實沒認真看好像真的看不出什麼頭緒

感謝我師父 Don 大的文章救了我：

Swift 實現視差捲動效果（Parallax Scrolling） - 陳董 Don - iOS 開發

此種效果或藉由一定時間內的，不同物體的關聯。藉由兩者的移動速度不同，移動快的物體感覺距離「 比較近 」；反之，移動慢的物體感覺距離「 比較遠 」。透過這種方式來告訴使用者介面上的物體比較重要。

UICollectionView-Parallax-Scrolling by Don Chen

所以我們在實作這個效果的時候，必須根據 tableView 的滑動距離來計算 cell 中的圖片的移動相同比例的距離，造成視差的效果。

先展示一下我們美美的城市風景主畫面：

TableView 顯示城市風景圖片

首先我們會在我們 TableView 的 Cell 文件中加上一個視差效果的方法：

建立好視差效果的方法之後，我們必須還要讓它在滾動時執行這個方法，這時我們需要 extension UIScrollViewDelegate 的協定，因為我們需要其中的 scrollViewDidScroll 方法：

我們還要在 viewDidLoad 的時候呼叫我們，上方建立的 cellParallax 方法，如此才能更新第一次視差效果。完成之後，這時當我們在滑動的時候就能夠有視差的效果了，畫面如下：

視差動畫效果

UIInterpolatingMotionEffect

在製作這個效果的過程中，也發現到了可以利用 Swift 中原生的功能UIInterpolatingMotionEffect 來實現視差的效果，透過屏幕的傾斜來達到是差的效果，必須在實機上測試：

UIInterpolatingMotionEffect 實機視差效果

實現方式如下：

後記

那麼我們這次兩種動畫效果的介紹就到這邊了，感謝大家的收看。

這次的 Demo 一樣等待四種效果介紹完才會上傳，稍後等待～感謝 😛