(Recently I started becoming a freelance developer, so if you are interested in finding a freelance developer to create beautiful apps, feel free to shoot me an email pjin.elvin@gmail.com☺)

Remark: Using GIF is not the only solution. It’s just one possible way of doing the effect. I personally prefer video player, but still, this GIF solution is an option. For direct steps, jump to section “Pre-work” below.

If you are a user of Spotify iOS app, you may notice that in the new version of this app, they used a playing video as the landing view background. This is a cooler design to me when compared to static image background. If you haven’t had a chance to see designs like this, here is a quick preview of my final result:

So I was thinking of re-creating the same effect as a coding practice. First question: How? The first method I came up with was somehow to create a video player and let it repeatedly play a video file in a background view. But I also want to place other elements on the view and I don’t need any sound of the video.

Then I came to GIF file. Now the problem is: How am I gonna place a GIF on a view? As far as I know, neither UIImageView nor UIImage support GIF animations. Even if UIImageView supports adding multiple images and animating between them, do we really need to create that much images from a video and add all of them into the project? The pre-work for processing the video would be a little bit complicated. Then what support GIFs? UIWebView.

Pre-work: Processing the Video

Prepare a video that you want to play as background. There are tons of software and web applications that you can use to convert your video to GIF file and also crop them into the iPhone screen size if you want the best result. There is a very good guide to show you how to do that and more resources are out there that you can get from google. Here I used a software called GIF Brewery. And there is also a detailed tutorial page for this app, which is very easy to follow.

Add Your GIF File into Your Xcode Project

Like adding any other resource files, just drag your GIF file into your project navigator.

Time to Code

I’ll use both Objective-C and Swift to show you how to achieve the goal. All the codes is written in viewDidLoad method of the landing view controller.

1. Create a file path of the GIF file and then use it to read the GIF you imported.

Objective-C:

NSString *filePath = [[NSBundle mainBundle] pathForResource:@”railway” ofType:@”gif”];

NSData *gif = [NSData dataWithContentsOfFile:filePath];

Swift:

var filePath = NSBundle.mainBundle().pathForResource(“railway”, ofType: “gif”)

var gif = NSData(contentsOfFile: filePath)

2. Create a UIWebView and add the GIF NSData as its data source. Because you want to make it as a background, so you need to set the frame size according to the iPhone screen. Also, because UIWebView acts like a scroll view, you want to set its user interaction to “False”. Then add this UIWebView to your main view.

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:

var webViewBG = UIWebView(frame: self.view.frame)

webViewBG.loadData(gif, MIMEType: “image/gif”, textEncodingName: nil, baseURL: nil)

webViewBG.userInteractionEnabled = false;

self.view.addSubview(webViewBG)

3. Optional: I want to add other buttons on my background, so I used another black filter view with 0.05 alpha value to cover the UIWebView. This fade out the background and let the buttons and titles stands out more.

Objective-C:

UIView *filter = [[UIView alloc] initWithFrame:self.view.frame];

filter.backgroundColor = [UIColor blackColor];

filter.alpha = 0.05;

[self.view addSubview:filter];

Swift:

var filter = UIView()

filter.frame = self.view.frame

filter.backgroundColor = UIColor.blackColor()

filter.alpha = 0.05

self.view.addSubview(filter)

4. Add any other things you want. Done!

Summary

The complete project is on my GitHub, feel free to download and play with it. The example GIF file is also in it. This may not be the best method to get the result, so you are more than welcome to discuss in the comment.

It is the first article of my blog and I’m very glad I started writing. I’ll keep writing to share design/programming techniques, which I think is innovative or worth sharing through my daily work. Welcome to share this article and follow me on Medium or Twitter.