LineageM 卡包動畫 – Frame animation

最近和朋友們都在重溫「天堂」這個網路遊戲,雖然遊戲畫面依舊沿用了過去的風格,但實際上玩起來已經完全不一樣了。

就像其他手遊一樣,融入了卡片、自動行動等功能,最近因為跨年的活動,開卡包、開箱子變成了大家關注的點。

這次想通過 UIKit 來實現開卡的動畫,但因為目前是參加鐵人 30的活動,每天只有一點時間來研究和實作。

我打算將其中隨機抽到卡片的效果丟到下一次研究(從快速輪播卡片,到最後慢慢停到這次抽到的那張卡片)。


Lineage M 卡包動畫

Open 效果:

  • 卡包的邊框會有光芒閃爍
  • 卡包的背面會有散發氣息的動畫

Hide 效果:

  • 卡包封面消失,顯示卡包內容(打開卡包拿到卡片)
  • 卡片底部散發氣息動畫

CardImageView

我們將所有卡片的動畫功能都封裝到 CardImageView 裡面,對外開放兩個功能。

openCard – 打開卡包

  • 去掉卡包背後散發氣息的動畫
  • 去掉邊框發亮的動畫
  • 隱藏卡包封面圖
  • 顯示卡牌圖片
  • 顯示卡牌圖片底下散發氣息的動畫

hideCard – 關閉卡包

  • 還原到打開前的狀態

Frame animation

圖中散發氣味又或者說煙霧繚繞的效果,這裡都會通過圖片來實現。

而這個動畫效果是來自下面這種圖( Sprite Image )每一格的團都會有些微的變化,通過連續的更換圖片就有了動畫的效果。

通過原生的 UIKit 就能做做到連續更換不同圖片的動畫效果。

我這裡已經將上面的 Sprite 中每一格的圖片切分開來(如果是通過 SpriteKit 的話,可以直接用上面這張圖,不用另外切開)

UIImageView 的 frame animation 方法

  • animationImages – 要連續更換的圖片
  • animationRepeatCount – 重複播放的次數,0表示一直重播
  • startAnimating – 開始播放


卡包邊框發亮的效果

 

卡包邊框的效果也是來自一張圖片,這個邊框發光的圖片中間是鏤空的,所以疊加上去就有了卡片發光的效果。

只需要對這個邊框圖片的 alpha 做動畫就會有閃爍的效果 ( alpha 0 -> 1 , 1 -> 0 )

  •  .autoreverse – 當動畫執行完畢便反向在執行一次,也就是從 Alpha 1 到 0 然後再從 0 到 1
  • .repeat – 重複動畫


筆記

因為 UIKit 本身有提供 Frame Animation 的方法,所以這次的動畫很容易就可以實現,需要注意的是放上圖層的順序、如何去加入和拿掉圖層。

更多的操作可以直接到 Github 上看 Source Code 會更好理解。


Reference

發表迴響

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