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

Jeremy Xue

11 min readJun 22, 2018

前導

我以為我能一天介紹大概接近一半的動畫效果，結果實際只錯了兩個 QQ

動畫完成的過程真的是挺繁複的，還要顧慮到許多因素，例如：發生時間、過程發生什麼、小細節效果之類的。但做足這麼多努力之後，發現動畫效果跑不到一秒就結束了…，但我還是喜歡動畫效果呈現出來時讓人驚訝的樣子。

今天我們也繼續接著介紹下去這 12 實用的動畫效果，如果還沒看過上一篇的話可以先看過一輪：

Swift — 實作 Creating Usability with Motion: The UX in Motion Manifesto 的動畫效果 Part.1

原文：

medium.com

# Parenting（從屬關係）

與多個物體互動時，創造空間和時間上的階層關係

Parenting 效果讓元件間有互相關聯，是很常用且實用的原理。Parenting 會讓物件之間的關聯，以會增加易用性的方式產生物體關聯和結構。Parenting 也可以讓設計師在大部分情況下更好安排介面事件，與使用者溝通時更自然描述物體的關聯。

這邊我們實作兩個範例，第一個範例我們先實作原文裡面所提到的一個簡單的評分介面的感覺，使用者可以透過 Slider 調整評比：

開始實作：

#1 Slider 控制品質

我們首先開始實作第一個 Slider 評分功能，這邊我們希望除了 icon 顯示笑臉外，我們還順便加上一個 Label 來表示這個心情，使 Slider 與上面兩個元件有關聯，我們先建立好我們的 Slider 所需的最大最小值以及初始值：

接著我們先設定好當 Slider 的 value 會變更所需的值：

我們可以知道我們這個 Slider 調整會進行兩種方法，第一個是「位移」，第二個是「變色」效果，所以我們接著定義下面兩個方法：

位移動畫：

func moveX(value:Int,object:UILabel) {  // 取 slider 7分之1 的寬度，作為我們位移距離
  let xMove = rateSlider.frame.width / 7  UIView.animate(withDuration: 0.2) {  object.center.x += CGFloat(value) * xMove  }}

變色效果：

func updateUI(value:Int) {  let number = value - 1  UIView.animate(withDuration: 0.2) {    // 進行各個 UI 元件的顏色改變
    self.rateSlider.tintColor = self.colorArray[number]
    self.rateLabel.layer.borderColor =    self.colorArray[number].cgColor
    self.rateLabel.textColor = self.colorArray[number]
    self.rateLabel.text = self.textArray[number]
    self.emojiLabel.text = self.emojiArray[number]
    self.emojiLabel.backgroundColor = self.colorArray[number]  }}

這時我們兩個方法都定義完成了，最後我們將我們 slider 與程式碼進行一個 Action 連結，選擇「 Value Change 」，這樣我們最後只要在 Value Change 中將我們 Slider 的 Value 經由計算傳遞到我們剛剛定義的方法中：

@IBAction func valueChange(_ sender: UISlider) {  // 將 slider 的值四捨五入到 value 中。
  let value = lrintf(sender.value)  // 判斷要往左或是往右位移
  if value > lastValue {    moveX(value: value - lastValue, object: emojiLabel)
    moveX(value: value - lastValue, object: rateLabel)  } else {    moveX(value: -(lastValue - value), object: emojiLabel)
    moveX(value: -(lastValue - value), object: rateLabel)  }  // 更新 UI 顏色
  updateUI(value: value)  // 更新上一個值
  lastValue = value  // 將 Slider 位置移動到我們四捨五入後的值上
  rateSlider.value = Float(value)}

#2 點擊按鈕顯示個人頁面

這邊我們一樣也操作與他相似的效果，我們下面是點選貓咪頭像來變更後面的背景圖片，並且點選的貓咪頭像要放大並且移動到中間：

我們一樣定義一個貓咪名稱的 Array，以及點選到的按鈕 tag：

所以我們需要定義變更背景圖片以及位移放大按鈕的效果，首先我們先定義變更背景圖片方式，因為直接改變圖片會顯得有點生硬，所以我們也同時變更他的透明度，看起來比較不衝突一些：

func changeIntroduceImage(number:Int) {  UIView.animate(withDuration: 0.4, animations: {    self.introduceImage.alpha = 0  }) { (finish) in    UIView.animate(withDuration: 0.4, animations: {     self.introduceImage.image = UIImage(named: "台灣常見貓咪介紹-\(self.imageArray[number])")
     self.titleLabel.text = "台灣常見貓咪介紹-\(self.imageArray[number])"
     self.introduceImage.alpha = 1  }) }}

所以我們的圖片會先由原有的圖片做一個淡出效果，接著淡入一張新的圖片，接下來我們要做下方按鈕的位移效果，我們這邊貓咪的按鈕都是放在一個 Outlet Collection 中，所以我們都使用 for in 語法來調用所有按鈕：

@IBAction func moveStackView(_ sender: UIButton) {  if sender.tag == currentNum {     return  }  // 用按鈕的 tag 來判斷是否跟上一個按鈕相同
  currentNum = sender.tag  // 計算該按鈕與畫面中心距離
  let moveX = self.catStackView.center.x - sender.center.x  UIView.animate(withDuration: 0.2, animations: {    for button in self.catButtons {      button.center.x += moveX    }  }) { (finish) in    UIView.animate(withDuration: 0.2, animations: {      // 將所有 Button 恢復原狀 
      for button in self.catButtons {        button.transform = CGAffineTransform.identity      }      // 更換圖片
      self.changeIntroduceImage(number: sender.tag)      // 放大點選的 Button
      sender.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)    })  }}