Как анимировать / изменять кнопки меню, такие как приложение Facebook Paper

Question

Я видел эту анимацию / морфинг в приложении Facebook Paper, где они превращали кнопку меню, ту, которую вы открываете, в X и обратно, когда вы нажимали на нее. Я записал это, потому что я не знаю, как показать это по-другому.

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

Может кто-нибудь объяснить мне, как это делается? Я хотел бы это для моего приложения.

Answer 1

Это было потрясающе, раньше такого не видел.

Создана быстрая суть, которая делает это:

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

Изменить: так что это не просто ссылка, ключевые понятия - это два метода:

-(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) {

    }];
}

а также:

-(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) {

    }];
}

Первый анимируется от параллельных линий к X, а второй от X к линиям. Играя с числами и вариантами анимации, вы получите разные ощущения от игры.

Повеселись!