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 ?

You have elaborated the whole thing clearly.. one vote for that.. — Ahmed Z., Nov 18 '13 at 12:28

Kunal Balani · Answer 1 · 2013-11-18T20:36:11.773

2

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;
    }];

}

edited Nov 18 '13 at 20:36

answered Nov 18 '13 at 20:31

Kunal Balani

4,739
4
36
73

@kunal-belani Thanks for the reply. But it does not add the animation which I require. As I have mentioned, the animation should be like filling the text colour from left to right slowly. – mobizen Nov 19 '13 at 07:45
it does animate. You can set your animation duration and try it.I have tested this code. – Kunal Balani Nov 19 '13 at 13:45
It dose Kunal, but not the way I wanted. Possibly due to ios 7 and xcode 5.0.2. I have tested it in Xcode 5.0 and used ios7 as base sdk. – mobizen Nov 20 '13 at 05:46

score 1 · Answer 2 · edited May 23 '17 at 10:25

1

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.

edited May 23 '17 at 10:25

Community

1
1

answered Nov 18 '13 at 12:30

Ahmed Z.

2,329
23
52

Thanks for the quick reply. Glad to know that I have explained it properly.. :) Surely will go through your links and let you know the progress. – mobizen Nov 18 '13 at 12:37
I can't use the gif images. Is there any option in animation to slowly make darker image visible from left to right ? Means the darker image will be there only just above the lighter image and opacity to 0. And while animating it, gradually increase the opacity to reassemble that we are redrawing the darker image from left to right. – mobizen Nov 19 '13 at 07:52
sorry for the late reply. But yes the problem solved by using animations only. – mobizen Dec 07 '13 at 07:42
Ok thanks.. just select my answer as the correct one for that :) – Ahmed Z. Dec 07 '13 at 09:13

UIImageView for showing the application loading progress

2 Answers2