播放 GIF 動態圖檔 (使用 Swift 4)

魏巍
7 min readJan 24, 2018

--

這個範例我是參考 Jared Davidson 的 Youtube 短片試做的,他是在 Github 找到一個可以顯示 GIF 圖檔的函式庫,發現其實不需要用 CocoPods 裝入整個函式庫,只要其中的某一個檔案,就可以讓 App 能夠播放 GIF 動畫圖檔。

請到 Github 網站(https://github.com/bahlo/SwiftGif) 後,點「SwiftGitCommon」,

看到這個「UIImage+GIF.swift」 就是我們要的檔案。

點進這個檔案,這些程式碼就可以達成顯示 GIF 圖檔的功能。

所以如果您也有興趣試試看的話,請開一個新的 Xcode 專案,

首先,請準備要顯示的 GIF 檔。把這個檔案拉到我的專案當中。這邊請注意,不用拉到 Asset.XCasset 裡面,因為這個不是靜態的圖檔,而是很特別的 GIF 動態圖檔。把您要顯示的 GIF 檔匯入之後,請選 Copy Item if needed,也勾選 add to targets,不然的話,gif 檔案不會真的放進您的專案。

接著請選 Main.storyboard,拉一個UIImageView到畫面上,這個 UIImageView 準備稍後來顯示 GIF 圖檔。請根據您的圖檔大小設定該 UIImageView 的 Autolayout。

把這個 UIImageView 連結到程式碼中,命名成 myGifView,因為這是要用來顯示 Gif 檔案的 UIImageView。

然後我們需要剛剛提到的程式碼,才能顯示 Gif 檔案。請回到之前提到的 Github 網頁,把「UIImage+GIF.swift」裡面的程式碼拷貝下來。然後回到 Xcode,新增一個空空的 Swift 檔案。

命名的話,可以隨意命名,這個範例中,就命名成跟原來函式庫一樣的名字:「UIImage+Gif」。

把剛剛從 Github 拷貝的程式碼,全部貼進這個檔案裡面。貼入之後存檔。

這個檔案最重要就是幫 UIImageView 加入一個新功能:loadGif,就可以匯入您的 Gif 檔了。

回到 ViewController.swift 檔案,在 viewDidLoad 方法中,呼叫 myGifView 的 load Gif 方法。參數 Gif 檔名請填您的檔名。就這樣一行就搞定了,超簡單的!

myGifView.loadGif(name: "cat")   //我的 GIF 檔名是 cat.gif

請按下編譯跟執行的按鈕試試看。現在我們的 UIIMageView 就會顯示 Gif 檔了。這個是我家的小貓,他叫 Apple,您也可以叫他輕鬆兄,因為他都是一派輕鬆無所謂的樣子。睡覺的時候四肢張的開開的,放得很鬆,所以才有這樣的花名在外。

這個檔案也可以調整 Gif 圖檔的播放速度。在拷貝進來的檔案中,只要把這個 delayForImageAtIndex 方法中的 delay 等於 0.1 改掉。改成您要的速度就可以了,比方說改成 0.5,並且在方法的下面,本來0.1 的地方也改成 0.5 就可以了。重新執行的話,Gif 檔播放的速度就會變慢。

internal class func delayForImageAtIndex(_ index: Int, source: CGImageSource!) -> Double {  var delay = 0.5 //*改這邊調整速度  // Get dictionaries
let cfProperties = CGImageSourceCopyPropertiesAtIndex(source, index, nil)
let gifPropertiesPointer = UnsafeMutablePointer<UnsafeRawPointer?>.allocate(capacity: 0)
if CFDictionaryGetValueIfPresent(cfProperties, Unmanaged.passUnretained(kCGImagePropertyGIFDictionary).toOpaque(), gifPropertiesPointer) == false {
return delay
}
let gifProperties:CFDictionary = unsafeBitCast(gifPropertiesPointer.pointee, to: CFDictionary.self)
// Get delay time
var delayObject: AnyObject = unsafeBitCast(
CFDictionaryGetValue(gifProperties,
Unmanaged.passUnretained(kCGImagePropertyGIFUnclampedDelayTime).toOpaque()),to: AnyObject.self)
if delayObject.doubleValue == 0 {
delayObject = unsafeBitCast(CFDictionaryGetValue(gifProperties,
Unmanaged.passUnretained(kCGImagePropertyGIFDelayTime).toOpaque()), to: AnyObject.self)
}
delay = delayObject as? Double ?? 0
if delay < 0.5 { //*這邊也要改
delay = 0.5 //*還有這邊也要改
}
return delay
}

以上分享了如何在您的 Xcode 專案中播放 Gif 檔的方法,希望對大家有幫助。如果您喜歡這個教學的話,歡迎訂閱。另外,我在 Facebook 有開一個學習 SWIFT 的粉絲團 (https://www.facebook.com/weiweiapp/),每天在那邊我都會分享我學到的 iPhone 開發技巧,也歡迎加入。

--

--

魏巍

Swift 講師、作家,以及開發者。 獨立開發 iPhone 與 Android 程式與遊戲,已經上架 40 款App,從企畫、美術、寫程式全部都一手包辦。其中最有名的包括年初上架登上App Store排行榜免費遊戲第一名的「黃色小鴨爆炸了」;與一年前免費遊戲榜第二名的「指認嫌疑犯」。 提供手機程式和遊戲開發課程,