iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
0

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

前言:

https://ithelp.ithome.com.tw/upload/images/20181108/20107701XnAsCdNQFp.png

此 App 中的主角,汽水君 ?

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


#偵測手機晃動:

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

https://ithelp.ithome.com.tw/upload/images/20181108/20107701GMLaGySGTr.png

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

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

#動畫效果

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

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

特別的是他還有 fromValuebyValue 以及 toValue

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

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

func sodaShakeAnimation() {
    // 這邊我們需要旋轉效果,所以在這邊 keyPath 選擇 transform.rotation 初始化它
    let animation = CABasicAnimation(keyPath: "transform.rotation")
    // 我們希望從左邊開始向右晃動,所以 fromValue 設為往左旋轉的角度
    animation.fromValue = -Double.pi / 6
    // toValue 則是設置我們結束的角度
    animation.toValue = Double.pi / 6
    // 動畫持續時間
    animation.duration = 0.2
    // 動畫結束時反向執行
    animation.autoreverses = true
    // 動畫重複次數
    animation.repeatCount = 5
    // 將動畫加入我們的汽水按鈕 layer 中。
    sodaButton.layer.add(animation, forKey: "shakeAnimation")
}

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

https://ithelp.ithome.com.tw/upload/images/20181108/20107701qf5B9haWcQ.png

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

運行結果:

image

左右搖擺的汽水君


後記:

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


上一篇
Day 23: 第二輪挑戰賽,做一個 Soda Shake!
下一篇
Day 25: Soda Shake - 讓畫面充滿氣泡吧!
系列文
一天一蘋果,Bug 遠離我。30

1 則留言

0
Lai
iT邦新手 5 級 ‧ 2018-11-08 18:20:06

好可愛哦 /images/emoticon/emoticon12.gif

我要留言

立即登入留言