注：使用GIF動態(tài)圖片只是一種可行的方式達(dá)到該效果，并非唯一解決方案斗躏。我個人更傾向于通過視頻播放器的方式來實現(xiàn)視頻背景效果柱告，然而通過GIF圖片仍然是一個可行的選項。實施步驟直接跳轉(zhuǎn)到下面的"工作前準(zhǔn)備"婆瓜。
如果你使用過iOS版本的Spotify 快集，你會注意到在這款應(yīng)用的新版本中，他們使用了一個播放的視頻作為app啟動的背景廉白。相對于靜態(tài)的圖片背景來說个初，這是一個相當(dāng)酷的設(shè)計。如果你還沒有見過這類設(shè)計猴蹂，可以瞄一下我做的最終結(jié)果：
僅僅為了讓你覺得有趣院溺，我在從柏林到格拉茨的火車上拍下了這個軌道的慢移視頻
于是我開始著手重新創(chuàng)建一個編程的實踐，來達(dá)到相同的效果磅轻。那么問題來了：怎樣實現(xiàn)珍逸？我首先想到的是，創(chuàng)建一個視頻播放器并且讓這個視頻文件在背景視圖上重復(fù)播放聋溜。但是我還要放其他控件到視圖上面谆膳，而且我也不需要視頻的聲音。
然后我想到了GIF文件〈樵辏現(xiàn)在的問題是：要怎么樣把一個GIF放到一個視圖上去漱病？據(jù)我所知，UIImageView和UIImage都不支持GIF動畫把曼。盡管UIImageView可以通過添加多張圖片和動畫結(jié)合的方式來實現(xiàn)缨称，我們真的需要從視頻中截取大量的圖片并把所有的這些圖片全都添加到工程中嗎？這樣制作視頻的工作準(zhǔn)備未免太復(fù)雜了祝迂。那還有什么支持GIF呢睦尽？答案是UIWebView。
工作前準(zhǔn)備：處理視頻
準(zhǔn)備一個你想作為背景播放的視頻型雳。有無數(shù)的軟件和網(wǎng)頁應(yīng)用可以用來把視頻轉(zhuǎn)換為GIF圖片当凡，如果你想得到最佳效果，需要把它們裁剪為iPhone的屏幕大小纠俭。
有一個非常好的指南來教你怎樣制作沿量，更多的資源你也可以從Google獲取。這里我用的是一個叫做 GIF Brewery的軟件冤荆。這個軟件也有一篇非常詳細(xì)的指南頁朴则，非常簡單易上手。
把GIF添加到工程中
跟添加其他文件一樣钓简，直接把GIF文件拖到你工程的導(dǎo)航目錄中乌妒。
開始編寫代碼
我會使用Objective-C和Swift來展示如何達(dá)到目的汹想。所有的代碼都寫在默認(rèn)加載的viewController中的viewDidLoad 里。
1．創(chuàng)建一個GIF的文件路徑撤蚊，用來讀取你添加的GIF文件古掏。
Objective-C:
1
2
3NSString?*filePath?=?[[NSBundle?mainBundle]?pathForResource:@”railway”?ofType:@”gif”];
NSData?*gif?=?[NSData?dataWithContentsOfFile:filePath];
Swift:
1
2
3let?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:
1
2
3
4
5
6
7UIWebView?*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:
1
2
3
4
5
6
7let?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上服赎。這樣可以淡出背景視圖葵蒂，同時讓按鈕和按鈕的標(biāo)題更突出。
Objective-C:
1
2
3
4
5
6
7UIView?*filter?=?[[UIView?alloc]?initWithFrame:self.view.frame];
filter.backgroundColor?=?[UIColor?blackColor];
filter.alpha?=?0.05;
[self.view?addSubview:filter];
Swift:
1
2
3
4
5
6
7
8
9Let?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)注我辐脖。
