Graphics and Animation: Numbers changing and colored bar

Question

I want to animate the attached screen in such a way that when the screen will appear on screen:

1) numbers will animate from 0 to the final value i.e. 1-2-3-....51-52

2) each bar will begin as a thin line and grow to the side until the respected size.

3) all the animations will happen simultaneously.

4) if possible, how can I add the shadow below the bar?

5) how can I implement the bar (graphically)? is there any example?

Answer 1

For the bars itself use simple UIView instances. After importing <QuartzCore/QuartzCore.h> You can give them a border and a shadow via the layer (view.layer). See CALayer: https://developer.apple.com/library/ios/#documentation/graphicsimaging/reference/CALayer_class/Introduction/Introduction.html

borderWidth, borderColor, backgroundColor 
shadowOpacity, shadowRadius, shadowOffset, shadowColor, shadowPath

For the animations of the numbers, use a timer and increase the numbers until the actual value is reached. Smth. like this:

CGFloat animationDuration = 1.0;
self.targetValue = 50;
[NSTimer scheduledTimerWithTimeInterval:animationDuration/targetValue target:self selector:@selector(increaseValue:) userInfo:nil repeats:YES];

and then a method like this:

- (void)increaseValue:(NSTimer*)timer;
{
    self.label.text = [NSString stringWithFormat: @"%d", [self.label.text intValue]+1];

    if ([self.label.text intValue] == self.targetValue) {
        [timer invalidate];
    }
}

For the animation, just resize the frames:

[UIView animateWithDuration:animationDuration animations:^{
    CGRect rect = self.barView.frame;
    rect.size.width = self.targetValue;
    self.barView.frame = rect;
}];