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.

Murillo · Accepted Answer · 2014-03-10T02:30:03.770

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!

Awesome, thank you! Why do you keep a weak reference to weakSelf? — Drazen, Mar 10 '14 at 05:48
I use weak references by default when working with blocks to avoid retain cycles. Animate blocks don't cause those though, because you don't retain them. So if you don't want to use them, you don't have to. — Murillo, Mar 10 '14 at 06:03

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

1 Answers1