利用UIWebView打造一個炫酷的視頻背景視圖（OC & Swift）

原文：OS: Make an Awesome Video Background View Using UIWebView (Objective-C & Swift)

2015-10-6更新：適配 Swift2.0

註：使用GIF動態圖片只是一種可行的方式達到該效果，並非唯一解決方案。我個人更傾向於通過視頻播放器的方式來實現視頻背景效果，然而通過GIF圖片仍然是一個可行的選項。實施步驟直接跳轉到下面的"工作前準備"。

如果你使用過iOS版本的Spotify ，你會注意到在這款應用的新版本中，他們使用了一個播放的視頻作為app啟動的背景。相對於靜態圖片背景來說，這是一個相當酷的設計。如果你還沒有見過這類設計，可以瞄一下我做的最終結果：

僅僅為了讓你覺得有趣，我在從柏林到格拉茨的火車上拍下了這個軌道的慢移視頻

於是我開始著手重新建立一個編程的實踐，來達到相同的效果。那麼問題來了：怎樣實現。我首先想到的是，建立一個視頻播放器並且讓這個視頻檔案在背景視圖上重複播放。但是我還要放其他控制項到視圖上面，而且我也不需要視頻的聲音。

然後我想到了GIF檔案。現在的問題是：要怎麼樣把一個GIF放到一個視圖上去。據我所知，UIImageView和UIImage都不支援GIF動畫。儘管UIImageView可以通過添加多張圖片和動畫結合的方式來實現，我們真的需要從視頻中截取大量的圖片並把所有的這些圖片全都添加到工程中嗎。這樣製作視頻的工作準備未免太複雜了。那還有什麼支援GIF呢。答案是UIWebView。

工作前準備：處理視頻

準備一個你想作為背景播放的視頻。有無數的軟體和網頁應用可以用來把視頻轉換為GIF圖片，如果你想得到最佳效果，需要把它們裁剪為iPhone的螢幕大小。

有一個非常好的指南來教你怎樣製作，更多的資源你也可以從Google擷取。這裡我用的是一個叫做 GIF Brewery的軟體。這個軟體也有一篇非常詳細的指南頁，非常簡單易上手。

把GIF添加到工程中

跟添加其他檔案一樣，直接把GIF檔案拖到你工程的導航目錄中。

開始編寫代碼

我會使用Objective-C和Swift來展示如何達到目的。所有的代碼都寫在預設載入的viewController中的viewDidLoad 裡。

1．建立一個GIF的檔案路徑，用來讀取你添加的GIF檔案。

Objective-C:

1 2 3

NSString *filePath = [[NSBundle mainBundle] pathForResource:@ "railway"  ofType:@ "gif" ];   NSData *gif = [NSData dataWithContentsOfFile:filePath];

Swift:

1 2 3

let filePath = NSBundle.mainBundle().pathForResource( "railway" , ofType:  "gif" )   let gif = NSData(contentsOfFile: filePath!)

2. 建立一個UIWebView並且把GIF轉換成的NSData形式作為它的資料來源。由於需要把它作為背景，因此frame尺寸應該根據iPhone的螢幕尺寸設定。同時，UIWebView類似於scrollview，你需要設定它的userInteractionEnabled 屬性設為NO。然後把UIWebView添加到主視圖上去。

Objective-C:

1 2 3 4 5 6 7

UIWebView *webViewBG = [[UIWebView alloc] initWithFrame:self.view.frame];   [webViewBG loadData:gif MIMEType:@ "image/gif"