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

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

前言:

此 App 中的主角,汽水君 😏

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


#偵測手機晃動:

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

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

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

#動畫效果

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

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

特別的是他還有 fromValuebyValue 以及 toValue

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

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

接著我們將這段程式碼放到 motionBeganmotionEnded 中執行看看吧!

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

運行結果:

左右搖擺的汽水君

後記:

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