Basic UIAnimation

Question

This is a very basic question but its my first time doing any animation in an app.

I have the following scenario. View 1 with some text is displayed and at a certain time the other views 2 and 3 should be animated in from the top pushing down on the first view.

At the moment I'm using auto layout in storyboard. Should I stop doing that when I want to animate or continue using it? Do I have to programmatically add/update constraints or show/hidden views?

I have tried show/hidden but it doesn't seem to work for me. When trying this I added all the views (right picture) and then set view 2 and 3 to be hidden hoping the bottom view to automatically go up, but that didn't work...

I haven't tried to manually set constraints because i have never done it before. I have a basic understanding of how it should be done but would like to know first if its the way to go?

Answer 1

I've set up a very basic project to illustrate my answer. You can find it here. Almost everything is done in IB. The left red view is pinned to the top of the screen and this constraint is connected to an IBOutlet in ViewController.m. Position of other views depend on position of the left red view. We change this constraint's constant value two times - first time after VC has loaded but not yet appeared on the screen, to move red views out of the screen. Second time, when button is pressed, we change constraint to what it was and force layout with animation. That's pretty much it.

 #import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *redViewTopConstraint;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.redViewTopConstraint.constant = - ([UIScreen mainScreen].bounds.size.width * 0.3 + 20);
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


- (IBAction)action:(id)sender {

    self.redViewTopConstraint.constant = 20;

    [UIView animateWithDuration:0.5f delay:0 usingSpringWithDamping:0.65f initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseOut | UIViewAnimationOptionBeginFromCurrentState animations:^{
        [self.view layoutIfNeeded];
    } completion:nil];


}

@end