在 iOS 中为 uibutton 将 3 行动画化为箭头答案

【问题标题】：Animate 3 lines into arrow in iOS for a uibutton在 iOS 中为 uibutton 将 3 行动画化为箭头
【发布时间】：2015-09-16 20:23:37
【问题描述】：

有谁知道如何通过将 CGAfflineRotation 应用于 3 个视图来为导航菜单栏中的右箭头设置 3 条平行线的动画以打开侧边菜单。

我真的需要这些方面的帮助，至少我可以有一个想法来开始它。

这就是尝试绘制它的样子：-

_______                  
_______                        \
_______         to   ___________\
                                /
                               /

任何想法或建议都会有所帮助。

【问题讨论】：

标签： ios objective-c iphone uibutton cgaffinetransform

【解决方案1】：

正如你所说，你应该使用CGAffineRotation。我给出了你想要的简单示例，所有内容都应该打包成适当的方法，视图应该是一些基本的autolayouts/layoutFrames 等。我只是发布可能的旋转解决方案，快速写在@987654324 @，应该改变什么。

另一种选择是使用例如firstView.layer.anchorPoint 并将其设置到适当的位置。

#define degreesToRadians(x) (M_PI * x / 180.0)

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];

    // let's create these 3 views as a lines
    UIView *firstView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 50, 1)];
    [firstView setBackgroundColor:[UIColor blackColor]];
    [self.view addSubview:firstView];
    UIView *secondView = [[UIView alloc] initWithFrame:CGRectMake(50, 53, 50, 1)];
    [secondView setBackgroundColor:[UIColor blackColor]];
    [self.view addSubview:secondView];
    UIView *thirdView = [[UIView alloc] initWithFrame:CGRectMake(50, 56, 50, 1)];
    [thirdView setBackgroundColor:[UIColor blackColor]];
    [self.view addSubview:thirdView];

    // now we can perform rotation, mind the degree and offsets in transform.
    [UIView animateWithDuration:1 animations:^{
        CGAffineTransform transform = CGAffineTransformMakeTranslation(24, 1);
        transform = CGAffineTransformRotate(transform, degreesToRadians(45));
        transform = CGAffineTransformTranslate(transform, -24, 1);
        firstView.transform = transform;

        transform = CGAffineTransformIdentity;
        transform = CGAffineTransformMakeTranslation(24, -1);
        transform = CGAffineTransformRotate(transform, degreesToRadians(-45));
        transform = CGAffineTransformTranslate(transform, -24, -1);
        thirdView.transform = transform;
    } completion:^(BOOL finished) {}];
}

【讨论】：

谢谢，万岁。我也会试试你的方法。

【解决方案2】：

用 CALayer Animation 比 UIView Animation 更容易做这样的动画。您需要添加三个子层：top_line、middle_line 和 bottom_line。然后在每一层和正确的位置画线（Hint：画线用CAShapeLayer）。最后只需将 top_line 和 bottom_line 图层旋转适当的角度，您可能还需要更改锚点和图层的位置。最后一步相当棘手，也许只是用不同的角度和锚点值进行一些试验，直到找到最合适的值。
当你成功地做了这样的动画，试着做反向动画。然后创建一个嵌入这两个动画的自定义 UIButton。恭喜！你有一个带有很酷动画的汉堡按钮，可以在任何地方重复使用！

【讨论】：