UIImageView for showing the application loading progress

Question

I have a launch screen which contains application logo, say test. As the application will start loading, the logo will gradually starts filling like this. In the end, when the application will be loaded completely, it will look like this.

One point I would like to mention here is that the colour is being filled from left to right. And there will not be a single colour. It contains different colours for different characters.

After googling, I come to know that I need to use two images completely filled image with red colour and another one without colour, one on the top of other and apply animations on it. So far I did that, but not succeeded in animating it from left to right.

Same functionality I need to apply in android also. Can someone please suggest ?

Answer 1

Have two images blank & filled overlapped with each other. Modify the width of filled image on the fly depending on the progress.

static int max_image_width = 250

//assumption
UIImage *blankImage;
UIImage *filledImage;

-(void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    [self fillImage:1]; /*any value between 0 and 1 */
}

-(void)fillImage:(CGFloat)progress{

    CGFloat image_width = max_image_width * progress;

    [UIView animateWithDuration:2  animations:^{

        CGRect frame = self.filledImage.frame;
        frame.size.width = image_width;
        self.filledImage.frame = frame;
    }];

}

Answer 2

Here's what you can do is that use sprite sheet animation in your iOS app, you can get the example from here http://www.icodeblog.com/2009/07/24/iphone-programming-tutorial-animating-a-game-sprite/ OR you can use a GIF Image code support available here https://github.com/arturogutierrez/Animated-GIF-iPhone and here https://stackoverflow.com/a/4386709/1042240 (SO's own answer)

Would be happy to hear what you try and implement.