从下往上增加的柱状图生成动画(适用于统计类应用)

      我们在一些统计,理财应用中,经常能看到很多的柱状图,用来直观的标注信息,最近一个朋友刚好在做这方面的应用,跑来问我这个怎么实现,我笑他不就是简单的实现一个动画嘛,额,然后自己去做的时候才发现各种坑.

       1.所有的UIView子类中,UILabel不能实现效果

       2.创建View和对View实现的动画效果要放在一个方法中

       3.增加的height和减少的top(顶部y坐标)必须成2倍关系 或者 增加的height和增加的bottom(底部y坐标)必须成2倍关系

       @最后,直接上代码,大家可以去试验下,我也不太清楚究竟是什么原理,有了解的欢迎给我留言

#import "HMTRootViewController.h"
#import "UIViewAdditions.h"

@interface HMTRootViewController ()

@property (nonatomic, strong)NSMutableArray *imageArray;
@property (nonatomic, strong)NSArray        *urlArray;

@property (nonatomic, strong)UIView *columnarView;  //  柱状图

@end

@implementation HMTRootViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.

#pragma mark - 一个bug,创建view必须和动画增高在同一个方法里面
self.columnarView = [[UIView alloc] initWithFrame:CGRectMake(10, 100, 40, 10)];
self.columnarView.backgroundColor = [UIColor redColor];
[self.view addSubview:_columnarView];

//  用来对比,columnarView是否发生了偏移
UIView *aa = [[UIView alloc] initWithFrame:CGRectMake(50, 150, 40, 10)];
aa.backgroundColor = [UIColor brownColor];
[self.view addSubview:aa];

UIButton * button = [UIButton buttonWithType:UIButtonTypeSystem];
button.frame = CGRectMake(100, 510, 80, 40);
[button setTitle:@"生成" forState:UIControlStateNormal];
[button addTarget:self action:@selector(onClickTextButton) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button];

[UIView animateWithDuration:2 animations:^{

//  增加的height和减少的top(顶部y坐标)必须成2倍关系,才能保持动画的一致
self.columnarView.height += 100;
self.columnarView.top -= 50;

} completion:^(BOOL finished) {
}];

}

- (void)onClickTextButton{

self.columnarView = [[UIView alloc] initWithFrame:CGRectMake(150, 100, 40, 10)];
self.columnarView.backgroundColor = [UIColor redColor];
[self.view addSubview:_columnarView];

[UIView animateWithDuration:2 animations:^{

//  增加的height和增加的bottom(底部y坐标)必须成2倍关系,才能保持动画的一致
self.columnarView.height += 100;
self.columnarView.bottom = 160; // self.columnarView.bottom += 50 不能实现

} completion:^(BOOL finished) {
}];

}