iT 邦幫忙鐵人賽 Day 24: Soda Shake — 晃動吧！汽水君！

藉由晃動手機來觸發動畫效果，並且讓你的圖片動起來吧！

前言：

此 App 中的主角，汽水君 😏

在這次教學我們會先使用原生的 motion 方法來獲取晃動開始以及晃動結束，並且我們透過 CABasicAnimation 讓我們的汽水圖片加上動畫效果，這麼一來看起來就像是我們真的晃動 App 中的汽水了。

＃偵測手機晃動：

我們可以到 Apple 文件中的 UIResponder 的 Responding to Motion Events 找到我們有這幾種方法可以獲取一些動作中的事件，例如：手機的播放狀態、上一首、下一首等等…，然後其中我們需要判斷的事件就是 .motion：

所以我們在這邊會使用 motionBegan 與 motionEnded 來實作，當手機晃動時就會執行其中的方法，我們等等會在其中編寫我們的動畫效果：

if motion == .motionShake {
   // 晃動動畫效果
}

＃動畫效果

這邊我們不使用 UIView.animte 來製作我們的動畫效果，因為個人感覺使用 CABasicAnimation 所製作的動畫效果比較彈性，它有以下幾個常會用到的動畫屬性：

* duration //動畫時間
* repeatCount //動畫重複次數
* repeatDuration //重複動畫時間，期間內會不停執行
* beginTime //動畫開始時間，可以使用 CACurrentMediaTime() + 秒數
* autoreverses //動畫結束後，反向執行一次

特別的是他還有 fromValue 、byValue 以及 toValue ：

* fromValue //所改變屬性的起始值
* toValue //所改變屬性的結束時的值
* byValue //所改變屬性相同起始值的改變量

然後這邊我們就開始來實作我們的動畫效果吧！我們原本汽水的圖片是直立的樣子，我們希望它有左右左右晃動的效果，所以我們會將它向左向右旋轉一定的角度，並且動畫結束時讓它反向且重複執行。

接著我們將這段程式碼放到 motionBegan 跟 motionEnded 中執行看看吧！

模擬器也有可以執行晃動的方式呦，不要傻傻地用手瘋狂的搖Ｒ 😂

運行結果：

左右搖擺的汽水君

後記：

那我們這次晃動汽水君的教學 (?) 就到這邊結束了，希望透過這次教學大家了解如何去獲取到手機中的 motion 事件，以及一些關於 CABasicAnimation 的動畫設置，那我們這次的教學就到這了，下次我們會再加入更多元素讓這個 App 看起來更豐富。