利用UIWebView打造一个炫酷的视频背景视图（OC & Swift）

http://www.cocoachina.com/ios/20151023/13860.html

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

如有需要，可以通过pjin.elvin@gmail.com发私信或联系我。

注：使用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" textEncodingName:nil baseURL:nil];   webViewBG.userInteractionEnabled = NO;   [self.view addSubview:webViewBG];

Swift:

1 2 3 4 5 6 7

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值设为0.05，覆盖到UIWebView上。这样可以淡出背景视图，同时让按钮和按钮的标题更突出。

Objective-C:

1 2 3 4 5 6 7

UIView *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 9

Let filter = UIView()   filter.frame = self.view.frame   filter.backgroundColor = UIColor.blackColor()   filter.alpha = 0.05   self.view.addSubview(filter)

4.添加其他你需要添加的，完成！

总结：

完整工程可以从我的GitHub下载和使用。示例中使用的GIF文件也在里面。以上可能并非最好的解决方式，欢迎共同探讨。

这是我博客的第一篇文章，很高兴能够开始写博客了。我会继续分享一些日常中创新性和值得分享的设计和编程技巧。欢迎在Medium 和 Twitter上关注我。