How to facebook style transition

Question

Want to implement a view controller transition similar to used in facebook and many other apps, snapshot is attached. Will it require playing with CoreAnimation framework or is it available in the toolkit?

Answer 1

You have to use CoreAnimation unless you want to import a 3rd part framework that someone suggested, but it is very simple to use CoreAnimation and I suggest you learn it because it is very powerful. Here is the simplest approach possible to give you an idea. You could structure it a little better yourself once you get a hang of it, to fit your needs:

In your viewcontroller have 2 views:

@interface yourViewController : UIViewController {
    // The facebook view in the example, this will be the view that moves.
    // Init this view with x=0 and let it cover the whole screen.
    IBOutlet UIView *topView; 

    // The fb menu in the example
    // Init this view so that it stays behind the topView.
    IBOutlet UIView *bottomView; 

    BOOL menuVisible; // init to false in viewDidLoad!
}

Create them in interface builder, or by code or however you are used to. Make them overlap eachother so that you only see the topView, and let the buttomView stay behind it.

When the user presses the button to show the menu:

-(IBAction)menuButtonPressed:(id)sender {
    // Set up animation with duration 0.5 seconds
    [UIView beginAnimations:@"ToggleMenu" context:nil];
    [UIView setAnimationDuration:0.5];

    // Alter position of topView

    CGRect frame = topView.frame; 

    if (menuVisible) {
        frame.origin.x = 0;
        menuVisible = NO;
    } else {
        frame.origin.x = 300; //Play with this value
        menuVisible = YES;
    }

    topView.frame = frame;   

    // Run animation
    [UIView commitAnimations];
}

Of course, you should implement your own UIView subclasses for the "facebook view" and the "menu view" etc and use for topView and bottomView in the example above.

Answer 2

Take a look at this, it might give you a starting point: https://github.com/Inferis/ViewDeck/