Photo by Євгенія Височина on Unsplash
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 檔案喔~