如何动画/变形一个菜单按钮像Facebook纸应用程序

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动画到直线。摆弄动画的数字和选项会给你不同的感觉。

玩得开心!