[SwiftUI]Ｑ版大富翁(Part 1 — Firebase角色設定 & 個人頁面，Part 2 — 多人連線遊戲)

1.畫面截圖:

2.App操作影片:

3.Github連結:

00657136/game

4.功能需求:

採用 MVVM 架構：

5.額外功能:

(1)使用 Xcode 13 的 AsyncImage呈現Firebase裡的圖片

AsyncImage(url: URL(string: "請填入網址")){ image in
                    image
                        .resizable()
                    .scaledToFit()
                } placeholder: {
                    Image("unknown")
                        .resizable()
                        .scaledToFit()
                }
                .frame()

(2)複製邀請碼：

UIPasteboard.general.string = inviteNumber

(3)使用Lottie高品質動畫呈現在APP上：

Lottie是由Airbnb所發展的一套Library，可將After Effects動畫應用在iOS、MacOS、Android與React Native等的原生App上。

動畫可經由一個 名為Bodymovin的擴充功能輸出成一個JSON格式，Lottie再讀取這個JSON格式的動畫資料，且即時呈現動畫模式。

簡單來說，就是用Lottie動畫的JSON，把動畫帶入ＡＰＰ

首先要安裝Lottie的套件，我是用Cocoapod

pod 'lottie-ios'

再來要寫一個專屬Lottie的View，以方便我們使用

import SwiftUI
import Lottie
struct LottieView: UIViewRepresentable {
    var name: String
    var loopMode: LottieLoopMode = .playOnce
    
    var animationView = AnimationView()
    
    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView(frame: .zero)
        
        animationView.animation = Animation.named(name)
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = loopMode
        animationView.play()
        
        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)
        
        NSLayoutConstraint.activate([
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor)
        ])
        
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {}
}

之後就可以用以下的格式套用到ＡＰＰ

LottieView(name: "你的Json", loopMode: .loop)

更多精彩的動畫可以上Lottie的網站查詢

Free Lottie Animation Files, Tools & Plugins - LottieFiles

(4)登入和註冊畫面的特殊效果

6.心得:

這次在準備素材上花費太多時間，再加上我太晚動工(抱歉啦Peter)

所以先交了一份半成品…

我之後會把大富翁的部分做出來的！