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

我在Facebook Paper应用程序中看到了这个动画/变形，他们会将菜单按钮（当你下拉菜单时的按钮）变形为一个X，然后在你点击它时返回。我把它录了下来，因为我不知道如何用其他方式来表现它

---

有人能给我解释一下这是怎么做到的吗？我想在我的应用程序中使用它。

这太棒了，以前从未见过

创建了一个快速的要点：

编辑：所以这不仅仅是一个链接，关键概念是两种方法：

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

    }];
}

以及：

第一个动画从平行线到X，第二个动画从X到线。使用动画的数字和选项可以给你们不同的感觉

---

玩得开心

太棒了，谢谢你！为什么要保留对weakSelf的弱引用？我在处理块时默认使用弱引用，以避免保留循环。不过，动画块不会导致这些问题，因为您不会保留它们。因此，如果你不想使用它们，你不必这么做。

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

    }];
}