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

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

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) {
    }];

}

从下往上增加的柱状图生成动画(适用于统计类应用),布布扣,bubuko.com