How to animate/morph an menu button like the Facebook Paper app

Question

I saw this animation/morphing in the Facebook Paper app where they would morph the Menu Button, the one when you pull down the menu, into an X and back when you tap it. I recorded it because i don't know how to show it any other way.

https://www.youtube.com/watch?v=y6j_mVgv-NM

Can someone explain to me how this is done? I would like this for my app.

Answer 1

That was awesome, hadn't seen that before.

Created a quick gist that does that:

https://gist.github.com/mnmaraes/9458421

Edit: So it's not just a link, the key concepts are the two methods:

-(void)morphToX
{
    CGFloat angle = M_PI_4;
    CGPoint center = CGPointMake(120., 120.);

    __weak TUIViewController *weakSelf = self;
    [UIView animateWithDuration:0.8 delay:0.0 usingSpringWithDamping:0.6 initialSpringVelocity:2.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        TUIViewController *strongSelf = weakSelf;

        strongSelf.topLineView.transform = CGAffineTransformMakeRotation(-angle*5);
        strongSelf.topLineView.center = center;

        strongSelf.bottomLineView.transform = CGAffineTransformMakeRotation(angle*5);
        strongSelf.bottomLineView.center = center;

        strongSelf.centerLineView.transform = CGAffineTransformMakeScale(0., 1.0);

    } completion:^(BOOL finished) {

    }];
}

and:

-(void)morphToLine
{

    __weak TUIViewController *weakSelf = self;
    [UIView animateWithDuration:0.8 delay:0.0 usingSpringWithDamping:0.6 initialSpringVelocity:2.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        TUIViewController *strongSelf = weakSelf;

        strongSelf.topLineView.transform = CGAffineTransformIdentity;
        strongSelf.topLineView.center = CGPointMake(120., 2.);

        strongSelf.bottomLineView.transform = CGAffineTransformIdentity;
        strongSelf.bottomLineView.center = CGPointMake(120., 238.);

        strongSelf.centerLineView.transform = CGAffineTransformIdentity;

    } completion:^(BOOL finished) {

    }];
}

The first one animates from parallel lines to an X and the second from the X to the lines. Playing around with the numbers and options of the animations should give you different feels to play with.

Have fun!