iT 邦幫忙鐵人賽 Day 26: Soda Shake — 透過用手機甩動汽水君!

使用 UIInterpolatingMotionEffect 幫我們的汽水君加上一個效果吧!

Jeremy Xue
2 min readNov 10, 2018

前言:

前面兩次教學動畫我們製作了一個汽水君的晃動效果以及背景的氣泡效果,那麼我們這一次想要加入一個效果,讓使用者甩動手機時汽水君根據手機的傾斜幅度來位移,如此一來我們這個 App 中的汽水君的效果呈現就更像我們現實的反應了。

#UIInterpolatingMotionEffect

將設備水平或垂直傾斜映射到指定的值的對象,以便 UIKit 可以將這些值應用於視圖。

我們在設定 UIInterpolatingMotionEffect 的時候,必須設定下列兩者:

  • keyPath:要修改的視圖的關鍵路徑。 此路徑必須對應於應用此運動效果的視圖的可動畫屬性。 例如,要更新視圖的center屬性,請指定字符串 “center”。
  • type:所要追蹤的運動類型。 您可以追蹤水平或垂直傾斜。

設定完之後,我們還需要設定 minimumRelativeValue 以及 maximumRelativeValue ,來設定映射視圖的最大最小偏移量。

所以這邊我們來設定我們汽水君的運動效果吧:

讓我們來測試一下汽水君是否會跟著我們手機晃動吧!

抱歉最近嗑太兇…

後記:

雖然設定這個運動效果的程式碼很簡潔,但是設定完成之後帶來的效果其實是很特別的,許多開發者也會使用 · 來實現一些視差效果 ( Parallax) ,這種根據設備反映的運動效果可以讓呈現的效果更貼近現實生活中的反應。

--

--

Jeremy Xue
Jeremy Xue

Written by Jeremy Xue

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

No responses yet