by
最近和朋友們都在重溫「天堂」這個網路遊戲，雖然遊戲畫面依舊沿用了過去的風格，但實際上玩起來已經完全不一樣了。
就像其他手遊一樣，融入了卡片、自動行動等功能，最近因為跨年的活動，開卡包、開箱子變成了大家關注的點。
這次想通過 UIKit 來實現開卡的動畫，但因為目前是參加鐵人 30的活動，每天只有一點時間來研究和實作。
我打算將其中隨機抽到卡片的效果丟到下一次研究（從快速輪播卡片，到最後慢慢停到這次抽到的那張卡片）。
Lineage M 卡包動畫
Open 效果:
- 卡包的邊框會有光芒閃爍
- 卡包的背面會有散發氣息的動畫
Hide 效果：
- 卡包封面消失，顯示卡包內容（打開卡包拿到卡片）
- 卡片底部散發氣息動畫
CardImageView
我們將所有卡片的動畫功能都封裝到 CardImageView 裡面，對外開放兩個功能。
openCard – 打開卡包
- 去掉卡包背後散發氣息的動畫
- 去掉邊框發亮的動畫
- 隱藏卡包封面圖
- 顯示卡牌圖片
- 顯示卡牌圖片底下散發氣息的動畫
hideCard – 關閉卡包
- 還原到打開前的狀態
Frame animation
圖中散發氣味又或者說煙霧繚繞的效果，這裡都會通過圖片來實現。
而這個動畫效果是來自下面這種圖（ Sprite Image ）每一格的團都會有些微的變化，通過連續的更換圖片就有了動畫的效果。
通過原生的 UIKit 就能做做到連續更換不同圖片的動畫效果。
我這裡已經將上面的 Sprite 中每一格的圖片切分開來（如果是通過 SpriteKit 的話，可以直接用上面這張圖，不用另外切開）
|
1 2 3 |
for i in 1...30 { auraBlueImages.append(UIImage(named: "img-aura-blue-\(i)")!) } |
UIImageView 的 frame animation 方法
- animationImages – 要連續更換的圖片
- animationRepeatCount – 重複播放的次數，0表示一直重播
- startAnimating – 開始播放
|
1 2 3 4 5 6 7 8 |
cardBackAuraView = UIImageView() cardBackAuraView.animationImages = auraGrayImages cardBackAuraView.frame.size = CGSize(width: frame.size.width * 2.5, height: frame.size.height * 2.5) cardBackAuraView.center = center cardBackAuraView.animationRepeatCount = 0 cardBackAuraView.animationDuration = 2.0 cardBackAuraView.startAnimating() addSubview(cardBackAuraView) |
卡包邊框發亮的效果
卡包邊框的效果也是來自一張圖片，這個邊框發光的圖片中間是鏤空的，所以疊加上去就有了卡片發光的效果。
只需要對這個邊框圖片的 alpha 做動畫就會有閃爍的效果 ( alpha 0 -> 1 , 1 -> 0 )
- .autoreverse – 當動畫執行完畢便反向在執行一次，也就是從 Alpha 1 到 0 然後再從 0 到 1
- .repeat – 重複動畫
|
1 2 3 |
UIView.animate(withDuration: 1.0, delay: 0, options: [.autoreverse, .repeat], animations: { self.cardBorderView.alpha = 0 }, completion: nil) |
筆記
因為 UIKit 本身有提供 Frame Animation 的方法，所以這次的動畫很容易就可以實現，需要注意的是放上圖層的順序、如何去加入和拿掉圖層。
更多的操作可以直接到 Github 上看 Source Code 會更好理解。
Reference
- 已在 Github 放置本文相關的 Source Code