Animating a UIView to slide down, then slide up

Question

Im trying to figure out why this isnt working

in my tableViewcontroller viewDidLoad

self.headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 5, 320,0)];

self.headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 5, 320, 0)];

self.headerLabel.textAlignment = NSTextAlignmentCenter;

self.headerLabel.text = @"text";

[self.view addSubview:self.headerView];


[self.headerView addSubview:self.headerLabel];




[UIView animateWithDuration:.5 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{

    self.headerLabel.frame = CGRectMake(0, 5, 320,15);
    self.headerView.frame  = CGRectMake(0, 5, 320,15);

} completion:^(BOOL finished) {

    [UIView animateWithDuration:.5 delay:2.0 options:UIViewAnimationOptionCurveEaseIn animations:^{

        self.headerLabel.frame = CGRectMake(0, 5, 320,0);
        self.headerView.frame  = CGRectMake(0, 5, 320,0);

    } completion:^(BOOL finished) {

    }];

}];

if I remove the slide back up part in the completion block of the first animate call It works. The view slides down correctly. However I cannot get it to shrink back up at all. When I include the slide up code in the completion block the view is not displayed at all on load and I dont know why and Im going insane

Solution 1

I'm not sure why the label disappears, but you can fix that by giving the view and label an appropriate height when you create them, and only animate the label's y position rather than its height.

- (void)viewDidLoad {
    [super viewDidLoad];

    self.headerView = [[UIView alloc] initWithFrame:CGRectMake(0, -30, 320,30)];
    self.headerView.backgroundColor = [UIColor yellowColor];
    self.headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 5, 320, 21)];

    self.headerLabel.textAlignment = NSTextAlignmentCenter;

    self.headerLabel.text = @"text";

    [self.view addSubview:self.headerView];
    [self.headerView addSubview:self.headerLabel];

    [UIView animateWithDuration:.5 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{
        self.headerView.frame  = CGRectMake(0, 0, 320,30);
    } completion:^(BOOL finished) {

        [UIView animateWithDuration:.5 delay:2.0 options:UIViewAnimationOptionCurveEaseIn animations:^{
            self.headerView.frame  = CGRectMake(0, -30, 320,30);

        } completion:^(BOOL finished) {

        }];

    }];
}

Solution 2

viewDidLoad is not really the best place to be starting animations. You should move the code to viewWillAppear: , and if you only want this to occur the first time the view appears, you should add a BOOL property to your controller (i.e. self.hasperformedInitialHeaderAnimation), so:

-(void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
if(!self.hasPerformedInitialHeaderAnimation){
self.hasPerformedInitalHeaderAnimation = YES;
[UIView animateWithDuration:.5 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{

self.headerLabel.frame = CGRectMake(0, 5, 320,15);
self.headerView.frame  = CGRectMake(0, 5, 320,15);

} completion:^(BOOL finished) {

[UIView animateWithDuration:.5 delay:2.0 options:UIViewAnimationOptionCurveEaseIn animations:^{

    self.headerLabel.frame = CGRectMake(0, 5, 320,0);
    self.headerView.frame  = CGRectMake(0, 5, 320,0);

} completion:^(BOOL finished) {

}];
}

Comments

[Stonep123]

I tried this. still same result. I put NSLog statements in the animate blocks to see if the code is running. It is, its just the animation that is supposed to slide it back up just removes it completely immediately. No delay. No animation If I remove the animation that slides the view back up it works fine. But if I want to slide it back up it wont work.

[Stonep123]

any ideas on why it just disappears?

[Stonep123]

great idea, dont know why I didnt think of that! ill be sure to try this in the morning thanks

[Stonep123]

it works great! exactly what I needed thank you so much. I spent all day yesterday trying to get it to work when the answer was so much easier than what I was trying to do. Thanks!