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

Question

我在Facebook Paper应用中看到了这个动画/变形效果，他们将菜单按钮（下拉菜单时出现的那个按钮）变形成X形，当你点击它时再变回原来的样子。我录制了它，因为我不知道如何以其他方式展示它。

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

有人能解释一下这是如何完成的吗？我想在我的应用程序中使用这个。

- Drazen

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变成了平行线。调整动画的数字和选项可以让你尝试不同的感觉。

玩得开心！

- Murillo

---

太棒了，谢谢！为什么要保留对weakSelf的弱引用？ - Drazen

我在使用块时默认使用弱引用以避免保留循环。但是，动画块不会导致这种情况，因为您不会保留它们。因此，如果您不想使用它们，则不必使用。 - Murillo