上一篇我們講解了回溯 Backstracking 演算法的概念，如果不清楚可以回去回顧一下 導讀 LeetCode 演算法 - Backtracking (Swift)，這篇我們要用 SwiftUI 來呈現 LeetCode 題目的畫面，而且前幾次我們利用了 SwiftUI 原生的 View、Path、Animation 那些一個一個用程式畫出來，實在是太費工了，省時的方式應該要是產一個動態圖片，給 SwiftUI 播放，才能快速達到我們要的效果。

SwiftUI 圖片動畫

SwiftUI 對於圖片動畫其實是不支援的，最基本的元件是 Image，但只提供靜態圖片的顯示，在我們這種需要大量展示演算法一個一個走訪的圖片效果來說，實在不夠用，因此解決方案會是利用 UIViewRepresentable 去連接原本的 UIView，也就是 iOS 原本傳統的 UI 元件，把它轉換成 SwiftUI 的寫法。

而最主流的圖片動畫呈現方式有兩種：

1. Lottie
2. GIF

讓我們一一介紹這兩種動畫到底如何放在 SwiftUI 吧。

Lottie 介紹

Lottie 是第三方播放動畫的工具由 Airbnb 開發出來的，參照官方網站介紹，有了這個工具，可以幫助工程師省去大量要寫動畫程式的工作，而設計師只需要利用 After Effects 軟體製作出動畫，再用工具簡單轉檔，交付給工程師的時候只需要 JSON 檔給工程師套用即可。

它的三步驟如下：

1. 安裝 Bodymovin 插件，這個插件讓我們方便把動畫圖檔從 After Effects 轉出來變成 JSON 格式。
2. 以第三方套件的方式在專案上導入 Lottie Library，參照此函示庫的 iOS Github 連結。
3. 利用 UIViewRepresentable 轉換成 SwiftUI 元件使其 SwiftUI 能夠使用。

UIViewRepresentable 基本框架如下， makeUIView 是讓我們新建我們要的 UI 元件，它就是會返回傳統 UIView，而 updateUIView 就是更新 UIView 的時候需要做的設定，它提供的接口特別簡單。

struct LottieView: UIViewRepresentable {

    func makeUIView(context: Context) -> some UIView {
        // 返回 UIView 物件
    }

    func updateUIView(_ uiView: some UIView, context: Context) {
        // 更新 View 相關設定
    }
}

套用 Lottie

我們這邊會用 pod 管理套件引入 Lottie，所以會在 podFile 新增，接著在終端機中執行 pod install 以安裝框架。

pod 'Lottie'

然後在相應的 SwiftUI 檔案上引入 Lottie，這樣才能取用相關物件，這裡我們會在 struct LottieView: UIViewRepresentable 出現的檔案引入。

import Lottie

再來就是填滿 Lottie 要得設定程式碼，前半段是動畫設定，後半段邏輯是約束元件相應位置，這就是 iOS 傳統 UI 的做法。

struct LottieView: UIViewRepresentable {
    var filename: String
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        let animationView = AnimationView()
        let animation = Animation.named(filename)
        
        animationView.animation = animation
        animationView.contentMode = .scaleAspectFit
        animationView.play()
        
        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)
        
        NSLayoutConstraint.activate([
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
        ])
        
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
    }
}

匯入你的 Lottie 檔

只要把 Lottie JSON 檔案放進專案裡面來，就可以直接使用。

不清楚可以參考這個網站教學 How to add Lottie Animation in SwiftUI。

使用動畫放入 SwiftUI

最後就可以直接在 SwiftUI 使用這個 Lottie 動畫元件了，只要傳入 Lottie 檔案的名稱即可。

struct ContentView: View {
    var body: some View {
        VStack {
            LottieView(filename: "loadingAnimation")
                .frame(width: 200, height: 200)
        }
    }
}

設計師如何用 Lottie

並不是所有設計師都會使用 Lottie，在研究的路上發現這個教學文章特別好懂，分享給大家。

• 【分享】如何使用Lottie 將完美動畫100%呈現在產品上

總結

經過一番研究與了解，發現 Lottie 需要搭配專業的動畫軟體 After Effects 才能使用，而本系列製作的動畫，只需要簡單呈現 LeetCode 題目的資料一行一行走訪呈現的動態模樣，花費時間學這麼專業的軟體實在是曠日廢時，接下來會選擇學習 GIF 檔案呈現的方式，雖然缺點是檔案會比較大，如果你是公司的專案，要呈現更專業美觀的動畫，那麼 Lottie 絕對是首選，所以下篇我們會開始介紹 GIF 要怎麼輕鬆呈現在 SwiftUI 上，就繼續努力囉！謝謝收看。