本文由CocoaChina譯者Leo008（論壇ID）翻譯
原文：iOS: Make an Awesome Video Background View Using UIWebView (Objective-C & Swift)
2015-10-6更新：適配 Swift2.0
如有需要，可以通過pjin.elvin@gmail.com發(fā)私信或聯(lián)系我。
注：使用GIF動態(tài)圖片只是一種可行的方式達到該效果，并非唯一解決方案。我個人更傾向于通過視頻播放器的方式來實現(xiàn)視頻背景效果，然而通過GIF圖片仍然是一個可行的選項。實施步驟直接跳轉(zhuǎn)到下面的"工作前準備"。
如果你使用過iOS版本的Spotify ，你會注意到在這款應(yīng)用的新版本中，他們使用了一個播放的視頻作為app啟動的背景。相對于靜態(tài)的圖片背景來說，這是一個相當酷的設(shè)計。如果你還沒有見過這類設(shè)計，可以瞄一下我做的最終結(jié)果：
僅僅為了讓你覺得有趣，我在從柏林到格拉茨的火車上拍下了這個軌道的慢移視頻
于是我開始著手重新創(chuàng)建一個編程的實踐，來達到相同的效果。那么問題來了：怎樣實現(xiàn)？我首先想到的是，創(chuàng)建一個視頻播放器并且讓這個視頻文件在背景視圖上重復(fù)播放。但是我還要放其他控件到視圖上面，而且我也不需要視頻的聲音。
然后我想到了GIF文件?，F(xiàn)在的問題是：要怎么樣把一個GIF放到一個視圖上去？據(jù)我所知，UIImageView和UIImage都不支持GIF動畫。盡管UIImageView可以通過添加多張圖片和動畫結(jié)合的方式來實現(xiàn)，我們真的需要從視頻中截取大量的圖片并把所有的這些圖片全都添加到工程中嗎？這樣制作視頻的工作準備未免太復(fù)雜了。那還有什么支持GIF呢？答案是UIWebView。
工作前準備：處理視頻
準備一個你想作為背景播放的視頻。有無數(shù)的軟件和網(wǎng)頁應(yīng)用可以用來把視頻轉(zhuǎn)換為GIF圖片，如果你想得到最佳效果，需要把它們裁剪為iPhone的屏幕大小。
有一個非常好的指南來教你怎樣制作，更多的資源你也可以從Google獲取。這里我用的是一個叫做 GIF Brewery的軟件。這個軟件也有一篇非常詳細的指南頁，非常簡單易上手。
把GIF添加到工程中
跟添加其他文件一樣，直接把GIF文件拖到你工程的導(dǎo)航目錄中。
開始編寫代碼
我會使用Objective-C和Swift來展示如何達到目的。所有的代碼都寫在默認加載的viewController中的viewDidLoad 里。
1．創(chuàng)建一個GIF的文件路徑，用來讀取你添加的GIF文件。
Objective-C:
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"railway" ofType:@"gif"];
NSData *gif = [NSData dataWithContentsOfFile:filePath];
Swift:
let filePath = NSBundle.mainBundle().pathForResource("railway", ofType: "gif")
let gif = NSData(contentsOfFile: filePath!)
2. 創(chuàng)建一個UIWebView并且把GIF轉(zhuǎn)換成的NSData形式作為它的數(shù)據(jù)源。由于需要把它作為背景，因此frame尺寸應(yīng)該根據(jù)iPhone的屏幕尺寸設(shè)定。同時，UIWebView類似于scrollview，你需要設(shè)置它的userInteractionEnabled 屬性設(shè)為NO。然后把UIWebView添加到主視圖上去。
Objective-C:
UIWebView *webViewBG = [[UIWebView alloc] initWithFrame:self.view.frame];
[webViewBG loadData:gif MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];
webViewBG.userInteractionEnabled = NO;
[self.view addSubview:webViewBG];
Swift:
let webViewBG = UIWebView(frame: self.view.frame)
webViewBG.loadData(gif!, MIMEType: "image/gif", textEncodingName: String(), baseURL: NSUrl())
webViewBG.userInteractionEnabled = false;
self.view.addSubview(webViewBG)
3．可選：我還需要添加其他按鈕到背景上，因此我使用了另一個黑色的過濾視圖，alpha值設(shè)為0.05，覆蓋到UIWebView上。這樣可以淡出背景視圖，同時讓按鈕和按鈕的標題更突出。
Objective-C:
UIView *filter = [[UIView alloc] initWithFrame:self.view.frame];
filter.backgroundColor = [UIColor blackColor];
filter.alpha = 0.05;
[self.view addSubview:filter];
Swift:
Let filter = UIView()
filter.frame = self.view.frame
filter.backgroundColor = UIColor.blackColor()
filter.alpha = 0.05
self.view.addSubview(filter)
4.添加其他你需要添加的，完成！
總結(jié)：
完整工程可以從我的GitHub下載和使用。示例中使用的GIF文件也在里面。以上可能并非最好的解決方式，歡迎共同探討。
這是我博客的第一篇文章，很高興能夠開始寫博客了。我會繼續(xù)分享一些日常中創(chuàng)新性和值得分享的設(shè)計和編程技巧。歡迎在Medium 和 Twitter上關(guān)注我。
