SwiftUI 本身的Image 並沒有支援 Gif 檔案，若是想要放動畫的除了用程式去寫外，現在有 Lottie 可以使用，SwiftUI 其實也是可以使用 Gif Image ，不過畢需要透過WKWebView 來實現

先找一個gif 圖，本次使用的是這個櫻花的圖示

這個檔案需要放在專案裡面，不需要放在 Assets 因為它並不是單純的圖片

WKWebView 是UIView 現在屬於WebKit 底下，UIView 是屬於 UIKit 底下，而UIKit元件要使用在 SwiftUI 上需要用UIViewRepresentable 做處理，官方有一個教學，有興趣的可以看一看，最主要就是需要實作二個function

func makeUIView(context: Context) -> UIView { }
func updateUIView(_ uiView: UIView, context: Context) { }

在有Delegate 的情況就是要實作 class Coordinator，詳細可以看教學或是上網找一下相關教學

實作

這次主要使用的是 WKWebView 因此上述 UIView 的部分都需要改成 WKWebView

func makeUIView(context: Context) -> WKWebView {
    let webView = WKWebView()
    let url = Bundle.main.url(forResource: imageName, withExtension: "gif")!
    let data = try! Data(contentsOf: url)
        
    webView.load(data, mimeType: "image/gif", characterEncodingName: "UTF-8", baseURL: url.deletingLastPathComponent())
        
    return webView
}

func updateUIView(_ uiView: WKWebView, context: Context) {
    uiView.reload()
}

剛剛有說過 WKWebView 是屬於 WebKit 底下，所以要記得 import WebKit，簡單說明一下程式碼

• 建立一個 WKWebView 做為回傳值
• url 參數取得gif 位置，forResource 是代入圖片名稱，因為希望能任意填入名稱，所以使用一個參數代表 image name，Bundle.main.url() 的回傳值是 Optional ，由於Gif 圖示一定要放在檔案裡，基本上不會有nil 的情況，所以就直接最後加上 !
• data 參數將圖片轉成 data，回傳值也是Optional的，如上述所說，這裡也直接使用 try! 來處理
• 最後讓webView 去取讀這個檔案
  • mimeType 就是指 Internet media type，寫web 的朋友們應該都很清楚，這是用來表示這是什麼樣的檔案，在此當然是 “image/gif”，有興趣可以看一下維基百科的說明
  • characterEncodingName，使用 UTF-8 來做解碼方式
• updateUIView() 只需要做一件事，就是 reload() 就好了

這樣就完成啦~ 很簡單對吧~

最後的結果就像這樣，加上 .frame 就可以調整大小，使用上非常方便

VStack {
   GifImageView(imageName: "cherry-blossoms")
       .frame(width: 60, height: 60)
   Text("Hello, world!")
}
.padding()

不知道未來 SwiftUI 會不會發展出自己的 WebView ，或是 Image 之後也可以支援 Gif 檔案，在那之前就用 WKWebView 來呈現Gif 圖示吧

最後祝大家 Coding 愉快!!

可以在這裡取得此Demo 檔案喔~