How to create an animation like in Facebook Pages top menu?

Question

In facebook'a new app, Pages, when you swipe down the menu appears at the top. The animation I am trying to do is the animation when you tap the settings button which is when each cell moves to the left one at a time, but very smoothly. How can I achieve such an animation without using Facebook's pop engine in Objective C ?

Answer 1

Bear in mind that each cell is probably a custom subclass of UIView (i.e. not UITableViewCell or other apple class) so you will have to design your UI carefully.

The animation, however, is easily achievable using the UIView class. Apple's documentation is a good place to start to learn about animation.

What you want is something like:

NSTimeInterval delay = 0.2;
for (UIView *myView in myViewArray) {
    [UIView animateWithDuration:0.5 delay:delay options:UIViewAnimationOptionCurveEaseInOut animations:^{
       /*
        * This is where you set the properties you want to animate.
        * If you're using AutoLayout (i.e. NSLayoutConstraint) you need to set the constant property of the relevant constraint, not the view's frame property.
        */
    } completion:nil];
    delay += 0.2;
}

This will provide you with animations that occur one after the other (0.2 seconds apart).