Search code examples
iosswiftbackground-imagesegueanimated-gif

Creating a smooth Gif Segue between view controllers like Vine Sign Up


I have a sign up and sign in view controller and a moving gif background along with other storyboarded UI elements.

Currently I have the gif coding on each view controller obviously making the gif restart as I segue between each view controller and also more concerning having a quick pop of white before it loads whenever moving between the pages.

What can I add to my code to: 1. Prevent the white pop when it segues 2. Swapping between view controllers smoothly with the gif just continuing as if nothing has happened, so it looks like you move the UI not the page.

Look at Vine Sign In / Sign Up for reference as it basically functions in a similar way and want the background gif to function as it does on Vine.

override func viewDidLoad() {

       super.viewDidLoad()


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

    let webViewBG = UIWebView(frame: self.view.frame)
    webViewBG.loadData(gif!, MIMEType: "image/gif", textEncodingName: "UTF-8", baseURL: NSURL(string: "")!)
    webViewBG.userInteractionEnabled = false;
    webViewBG.layer.zPosition = -3.0;

    self.view.addSubview(webViewBG)

Solution

  • As a starting point don't use a UIWebView for this. It is the reason you are seeing a white background just before the gif, the web view has been rendered on screen then shortly after the gif is rendered.

    I'd recommend separating out the frames of the gif and loading them into a UIImage (and finally into a UIImageView) using one of the following techniques: