BankCoins – 讓錢幣飛一會

快過年了,這次做一個一堆錢飛向存錢筒的動畫效果。


BankCoins

畫面正上方放著一個存錢筒,點下「Show me the money」以後,會有300個金幣、銀幣從畫面底部飛向存錢筒。

錢幣飛行的過程會逐漸變小,到達存錢筒的位置時會消失。


晃動存錢筒

讓 bankView 根據 Z 軸進行來回三次的 rotation 的動畫。


初始化錢幣

錢幣的動畫是這樣的,一開始在畫面底部生成 300個金幣、銀幣,接著為每一個錢幣延遲做一個動畫,飛向存錢筒。

通過 Dispatch.main.asyncAfter 方法延遲每一個初始化的金幣及其動畫。

根據順序為錢幣分配 tag 和錢幣圖案的分配(金幣或銀幣)

這時候錢幣的 center 位置,是存錢筒的 center 偏上 20 個單位。


錢幣飛行動畫

這裡分步驟解釋一下,動畫都在下面這個方法裡面。

錢幣位置的移動動畫

剛才我們給 coinView 的 center 設定的是希望最後停留的位置,這裡紀錄做 targetX / targetY

  • 錢幣終點記做 targetX / targetY 這個值來自於我們前面為 coinView 設定的 center (最後要飛到存錢筒上)
  • 錢幣起點記做 fromX / fromY 在畫面底下再向下一個錢幣的位置(畫面外面)
  • 通過 CGMutablePath() 畫出移動路線。
  • 執行位置移動的動畫交給 CAKeyframeAnimation(keyPath: “position”) 來做。

錢幣縮小的動畫

  • 設定動畫起始大小為 1.x
  • 設定動畫最終大小為 1.x * 0.5
  • 大小變化的動畫交給 CAKeyframeAnimation(keyPath: “transform”) 來執行。

組合動畫

將錢幣移動和縮放大小的動畫合在一起,交給 coinView.layer


動畫完成移出錢幣

CAAnimationGroup 有個代理方法,當動畫完成的時候會執行 animationDidStop()

我們通過 lastFinishedCoinNumber 來紀錄最後完成錢幣 (coinView) 動畫的 tag

通過 tag 移出對應的 coinView 並且從 coinNumbers 中移出號碼。

在所有錢幣的動畫都完成時,搖動存錢筒。


Reference

  • 在 Github 上有放本文相關的 Source Code 可以參考。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *