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

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

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

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

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

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

[objc]  view plain copy

1. #import "HMTRootViewController.h"  
2. #import "UIViewAdditions.h"  
3.   
4. @interface HMTRootViewController ()  
5.   
6. @property (nonatomic, strong)NSMutableArray *imageArray;  
7. @property (nonatomic, strong)NSArray        *urlArray;  
8.   
9. @property (nonatomic, strong)UIView *columnarView;  //  柱状图  
10.   
11. @end  
12.   
13. @implementation HMTRootViewController  
14.   
15. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  
16. {  
17.     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
18.     if (self) {  
19.         // Custom initialization  
20.     }  
21.     return self;  
22. }  
23.   
24. - (void)viewDidLoad  
25. {  
26.     [super viewDidLoad];  
27.     // Do any additional setup after loading the view.  
28.      
29. #pragma mark - 一个bug,创建view必须和动画增高在同一个方法里面  
30.     self.columnarView = [[UIView alloc] initWithFrame:CGRectMake(10, 100, 40, 10)];  
31.     self.columnarView.backgroundColor = [UIColor redColor];  
32.     [self.view addSubview:_columnarView];  
33.       
34.     //  用来对比,columnarView是否发生了偏移  
35.     UIView *aa = [[UIView alloc] initWithFrame:CGRectMake(50, 150, 40, 10)];  
36.     aa.backgroundColor = [UIColor brownColor];  
37.     [self.view addSubview:aa];  
38.   
39.     UIButton * button = [UIButton buttonWithType:UIButtonTypeSystem];  
40.     button.frame = CGRectMake(100, 510, 80, 40);  
41.     [button setTitle:@"生成" forState:UIControlStateNormal];  
42.     [button addTarget:self action:@selector(onClickTextButton) forControlEvents:UIControlEventTouchUpInside];  
43.     [self.view addSubview:button];  
44.       
45.     [UIView animateWithDuration:2 animations:^{  
46.           
47.         //  增加的height和减少的top(顶部y坐标)必须成2倍关系,才能保持动画的一致  
48.         self.columnarView.height += 100;  
49.         self.columnarView.top -= 50;  
50.           
51.     } completion:^(BOOL finished) {  
52.     }];  
53.   
54. }  
55.   
56. - (void)onClickTextButton{  
57.       
58.     self.columnarView = [[UIView alloc] initWithFrame:CGRectMake(150, 100, 40, 10)];  
59.     self.columnarView.backgroundColor = [UIColor redColor];  
60.     [self.view addSubview:_columnarView];  
61.   
62.     [UIView animateWithDuration:2 animations:^{  
63.   
64.         //  增加的height和增加的bottom(底部y坐标)必须成2倍关系,才能保持动画的一致  
65.         self.columnarView.height += 100;  
66.         self.columnarView.bottom = 160; // self.columnarView.bottom += 50 不能实现  
67.       
68.     } completion:^(BOOL finished) {  
69.     }];  
70.   
71. }