iphone - グラフィックスとアニメーション: 数字の変化と色付きのバー

Question

画面が画面に表示されるときに、添付の画面をアニメーション化したいと思います。

01) 数値は最終値までアニメートされます。つまり、 1- 2- 3-.... 51-52

2) 各バーは細い線として始まり、適切なサイズになるまで横に伸びます。

3) すべてのアニメーションが同時に発生します。

4) 可能であれば、バーの下に影を追加するにはどうすればよいですか?

5) バーを (グラフィカルに) 実装するにはどうすればよいですか? 例はありますか？

Answer 1

バー自体には、単純な UIView インスタンスを使用します。インポート後<QuartzCore/QuartzCore.h>レイヤーを介して枠線と影を付けることができます ( view.layer)。CALayer を参照してください: https://developer.apple.com/library/ios/#documentation/graphicsimaging/reference/CALayer_class/Introduction/Introduction.html

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

数字のアニメーションについては、タイマーを使用して、実際の値に達するまで数字を増やします。スムーズ。このような：

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

そして、次のような方法：

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

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

アニメーションの場合は、フレームのサイズを変更するだけです:

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