Creating a animated loading frame w/ condition NOT animated launch screen

Question

Hi a few view controllers in my app do some pretty intensive image processing at load up.

So what Id like to do is create a full screen animated image(which I already know how to do with image view) and continue animating until the view controller is completely ready for use. I know I have to create another thread for this animation(i think) and somehow have this image loop until a certain condition is TRUE? Anyone have any good tutorials to share or have some useful code. All I've been finding online is animated launch images tutorials that just go for a certain time the programmer has set..not any tutorials that explain how to do so until a certain condition is TRUE

Do you need to perform a custom animation using UIKit, or will a simple .gif do the trick? — mspensieri, Apr 21 '14 at 14:00
simple .gif could work suffice as an example but id probably be doing a custom animation with UIKit — , Apr 21 '14 at 14:03

mspensieri · Accepted Answer · 2014-04-21T15:00:04.850

1

The trick is not to think of it as a waiting cycle. You should think of it as two distinct events: loading started, and loading completed.

When loading starts, you create your image view that hosts your .gif, and display it:

[self.imageView startAnimating];
[self.view addSubview:self.imageView];

Or, if you want it to fade in:

self.imageView.alpha = 0;
[self.imageView startAnimating];
[self.view addSubview:self.imageView];
[UIView animateWithDuration:0.5 animations:^{
    self.imageView.alpha = 1.0;
}];

Then, when loading completes, you just need to fade it back out again:

[UIView animateWithDuration:0.5 animations:^{
    self.imageView.alpha = 0;
} completion:^(BOOL finished) {
    [self.imageView stopAnimating];
    [self.imageView removeFromSuperview];
}];

See this github project for how to break down a .gif into frames and animate it using UIImageView. With this approach, you don't care how long the loading takes. Your imageView will display and automatically keep looping until you explicitly remove it.

Edit:

If you want to do custom animations using UIKit, you can put your animations in an auto-repeating (and auto-reversing?) animation block:

[UIView animateWithDuration:0.5
                      delay:0.0
                    options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat
                 animations:^{
                     // Do some animation
                 } completion:nil];

Then, cancel the animation when you loading completes:

[self.view.layer removeAllAnimations];

edited Apr 21 '14 at 15:00

answered Apr 21 '14 at 14:10

mspensieri

3,501
15
18

where do I add the .gif to the imageView? – Apr 21 '14 at 14:19
If you're using storyboard, your imageView is initialized for you, so you just set `self.imageView.image = yourGif;`, otherwise you can do it when you create the image view : `self.imageView = [[UIImageView alloc] initWithImage:yourGif];` – mspensieri Apr 21 '14 at 14:20
any tips on how to actually animate the .gif I've only ever made custom animation i just pulled a random .gif off the internet to try your code quickly – Apr 21 '14 at 14:48
I've never actually created a gif myself, sorry! I think you can make them in photoshop though, if you have access to that – mspensieri Apr 21 '14 at 14:49
its already created..i took it off the internet to try for this example.. when i click in Xcode i see that animation but when loading in my image view it just shows the first frame of the animation? should it just go on its own? – Apr 21 '14 at 14:51
Hmm, you're right. It doesn't animate automatically! Check out [this github project](https://github.com/mayoff/uiimage-from-animated-gif) to see how to break down the .gif into frames and use UIImageView – mspensieri Apr 21 '14 at 14:57

Creating a animated loading frame w/ condition NOT animated launch screen

1 Answers1