How can I animate some subviews of a UIViewController "off" the screen, and other views "on" the screen?

Question

Here's what I'm trying to achieve, I've created 3 pictures which do a better job describing what I want to do better than I ever could.

Here's what I want to do...

I want to keep "App Title" right where it is. I also have a UIImageView now that takes up the entire screen where the dark black is, and I want it to stay fixed like "App Title".

However on the first image when the user clicks "Create Account" I want to animate all those buttons left and off the screen, and then animate on the "Create Account" buttons from the right.

How can I do this.

Keep in mind I'm using storyboards and auto layout constraints. I've created the view in Picture #1. Now I need to figure out how to animate on the "Create Account" views. How can I do this, while keep using storyboards/IB and autolayout, and have it fit for all phones of course?

Answer 1

Just give you an example about how to do it

First I suggest you to use a contain view to contain your textfields and button.Then it become animate two contain view.

1. Drag the constraints of x position as outlet,in this demo,it is center x.Also drag the two contain view

   @property (weak, nonatomic) IBOutlet UIView *yellowView;
   @property (weak, nonatomic) IBOutlet UIView *greenView;
   @property (weak, nonatomic) IBOutlet NSLayoutConstraint *greenConstraint;
   @property (weak, nonatomic) IBOutlet NSLayoutConstraint *yellowConstraint;
   

1. Then in viewDidLoad,set the yellowView off the screen and set hidden to YES

   - (void)viewDidLoad {
        super viewDidLoad];
        self.yellowConstraint.constant = CGRectGetWidth(self.view.frame);
       [self.view layoutIfNeeded];
        self.yellowView.hidden = YES;
     }
   

2. When click,animate to show the yellow view

   - (IBAction)start:(id)sender {
       self.yellowConstraint.constant = 0;
       self.yellowView.hidden = NO;
       self.greenConstraint.constant = -1 * CGRectGetWidth(self.view.frame);
      [UIView animateWithDuration:0.5 animations:^{
         [self.view layoutIfNeeded];
      } completion:^(BOOL finished) {
         self.greenView.hidden = YES;
   }];
     }