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

8 min readJun 29, 2018

前言：

這次我們要介紹的效果是 Overlay 以及 Cloning ，前幾次的動畫效果大致上都有一個方向可以想像。但這次 Overlay 效果 iOS 本身就可以達成了，而 Cloning 的黏性效果卻是難到我無法想像，只能用簡單效果的方式取代。

我做不出來我自打嘴巴。

# Overlay（重疊）

Overlay 之所以能增進易用性，是讓使用者可以利用平面視覺上的先後順序屬性，克服缺少足夠空間的階層結構。

像是在 TableView Cell 中我們可以控制它左右滑顯示出額外的區塊功能，例如：右滑刪除，左滑編輯等等…。或是我們常常會在畫面上將某個元件移開，看見隱藏在後面的功能或畫面，帶給使用者一種這些元件是在不同階層的感覺，如此也能省下畫面的空間。

因此我們簡單來實作一下 Overlay 效果吧，我們先來做一個簡單的背景切換的功能來實作，畫面設計如下：

之後當使用者點選下方 Change background Image 按鈕，我們會把下面整個 View 升起來蓋住整個畫面，之後會有兩種桌布給使用者選擇：

開始實作

其實我們這邊一如往常的規劃好第一個畫面之後，我們就直接放一個 View 蓋住上一個 View 直接做好我們第二個畫面。之後再透過 viewDidLoad 使他為位移露出一個 Button 的距離，之後我們一樣定義一個顯示與消失的方法：

func showChangeBackgroundView() {  UIView.animate(withDuration: 0.4) {    self.changeBackgroundView.transform = CGAffineTransform.identity  }}func hideChangeBackgroundView() {  UIView.animate(withDuration: 0.4) {    self.changeBackgroundView.transform = CGAffineTransform(translationX: 0, y:    self.changeBackgroundView.frame.height * 0.9)  }}

之後透過將我們的 showChangeBackgroundView的方式加到我們剛剛露出的那個 Change Background Image 的按鈕 Action 上就可以叫出我們更改背景的 View 了。接著，我們再將更換圖片的方法加入其中，並且呼叫 hideChangeBackgroundView 就能又回到主畫面了：

@IBAction func changeBackground(_ sender: UIButton) {  // 這邊我們的按鈕有設定 tag，所以我使用 tag 來判斷是哪個按鈕。
  switch sender.tag {    case 0:      backgroundImage.image = UIImage(named: "dogBG1")
      hideChangeBackgroundView()    case 1:      backgroundImage.image = UIImage(named: "dogBG2")
      hideChangeBackgroundView()    default:      break  }}

畫面如下：

第二種 TableView 的方式就不多加敘述了，可以使用 TableView 的 Delegate 其中 Handling Swipe Action 的方法來製作效果，之後會簡單介紹這個功能：

# Cloning（複製）

在新物體分離或回到原處時，創造連續性、關聯性與敘事效果。

當初沒看個仔細，認真放慢看了一下才發現有夠難…如果沒有黏性效果真的是沒有特別難實現：

所以原諒我做一個沒有黏性效果的版本（先跪

這邊我們先實作一個真的有複製的動畫效果，那麼首先我們就必須有一個產生 View 的方法：

func createCloningView() -> UIView {  let cloningView = UIView()
  cloningView.frame = whiteView.frame
  cloningView.backgroundColor = UIColor.white
  cloningView.layer.cornerRadius = whiteView.frame.height / 2
  cloningView.clipsToBounds = true  return cloningView}

之後將他賦值給我們 cloningView，接著我們需要給他加上一個動畫效果，這邊我們使用 transform 來製作，因為程式碼排版問題，這邊上圖：

我們藉由 isStart 這個 Bool 值判斷是否複製過了。如果沒有複製過，那麼就新增一個 View 並且執行動畫（自身向上、複製向下），若已經複製過了，那麼就回到原位，並且將我們複製的 cloningView 給移除。

下面我們還會做一個常見的複製按鈕效果，當然一樣沒有黏性的效果ＸＤ，我一樣使用原生就可做出的效果來實現，參考範例：

這邊我們一樣先在 Storyboard 上面拉好畫面，利用變形效果來使其縮小：

首先因為我們中間的按鈕會先放大再縮小，因此必須去不斷去更新他的寬高以及圓角比，所以我們會定義一個方法：

// 因為我們這邊按鈕都為圓形，所以只要給他寬或高即可。
func setMenuButtonFrame(width:CGFloat){  self.menuButton.frame = CGRect(x: 0, y: 0, width: width, height: width)
  self.menuButton.layer.cornerRadius = width / 2
  self.menuButton.center = self.view.center}

之後就開始規劃我們的動畫流程了