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

玩得开心！

如何设置动画/变形菜单按钮，如Facebook Paper应用程序

1 个答案: