How can I make this animation effect in iPhone development? Quartz2d, Core Animation?

Question

What I would like to make is a bar with growing animation and the text(number) also growing with the value of bar length. It looks like:

The bar should be growing horizontally and the text with number should grow too. And the user may be want to play the animation again by tap "Replay".

After read apple programming guide and some great tutorials, I have a general idea. With Quartz2d, I could draw the bar and also the vertical line, and also the text as well. But Quartz2d does not have animation effect. With Core Animation, I could change the shape of the bar by time and specified properties value. Am I right on this?

So I guess what I want is combine Quartz2d and Core Animation, draw the bar with Quartz2d first and then use CA to animate it? Is it the correct way to do this? Or if any other light-weight solution available, I will greatly appreciate.

PS: I'm very new to iPhone drawing, as far as I know, the lightest way to do animation is by UIView animation, and the lighter one is by CALayer animation. And the whole drawing work is by Quartz2d, am I correct? It's kind of confusing even after I read this post. But to be practical, I do not (or not able to) get too conceptual about the whole graphic system. But I will definitely keep digging after write some actual code about this.

So, right now, I just need to know if this is the best way to realize this animation effect.

Thanks guys :)

Answer 1

I would use something like what I've written below. It'll grow your frame over the course of 1.5 seconds (of course, you can change the duration). I'm not sure what kind of object you're using for your shape. You can just use something like a UIView and set the backgroundColor to whatever you want.

// calculate your new frame - not sure what your parameters are as you've not explained it in your question.
CGRect newFrame = CGRectMake(10, 10, 300, 40);  // arbitrary values to demonstrate process... 

[UIView animateWithDuration:1.5 animations:^{
    // grow your rect (assuming yourShape is a UIView)
    yourShape.frame = newFrame;
    yourLabel.center = CGPointMake(newFrame.size.width - yourLabel.frame.size.width, yourLabel.center.y)
} completion:^(BOOL finished) {
    // do anything here that needs to occur after..

}];

Wasn't sure what exactly you meant by 'growing your text' (incrementing it or increasing font size), so I've given an example that'll keep your text at the end (right) of your horizontal bar). This should give a good starting point for experimenting with UIView animations.

---

Incrementing Label Update

You'll need to use an NSTimer to increment your label. Try this code out.

in your .h

int maxNum;
NSTimer *numTimer;

in your .m

Use this to start your counting. You'll probably want to put this just before your UIView animations.

maxNum = 100;  // make this whatever number you need..
// you can change the TimeInterval to whatever you want..
numTimer = [NSTimer scheduledTimerWithTimeInterval:0.03 target:self selector:@selector(growNumbers:) userInfo:nil repeats:YES];

This is the selector the timer calls each time it fires (every 0.03 seconds):

- (void)growNumbers:(id)sender {
    int i = self.numberLabel.text.intValue;
    if (i >= maxNum) {
        [numTimer invalidate];
        maxNum = 0;
    } else {
        i++;
        self.numberLabel.text = [NSString stringWithFormat:@"%i",i];
    }
}