Question

有没有人知道如何将3条平行线设置为右箭头，如导航菜单栏中所示，通过将CGAfflineRotation应用于3个视图来打开侧边菜单。

我真的需要这方面的帮助，至少我可以想到启动它。

这将是一些如何尝试绘制它的样子： -

_______                  
_______                        \
_______         to   ___________\
                                /
                               /

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

Answer 1

正如您所说，您应该使用CGAffineRotation。我给出了你想要的简单例子，一切都应该包含在正确的方法中，观点应该是一些基本的autolayouts / layoutFrames等等。我只是发布可能的解决方案旋转，快速写入viewDidAppear，应该改变什么。

另一种选择是使用例如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) {}];
}

Answer 2

使用CALayer Animation而不是UIView Animation更容易进行此类动画。您需要添加三个子图层：top_line，middle_line和bottom_line。然后在每个图层和右侧位置绘制线条（Hint：使用CAShapeLayer绘制线条）。最后，只需以适当的角度旋转top_line和bottom_line图层，您可能还需要更改锚点和图层的位置。在最后一步这是非常棘手的，也许只是做一些具有不同角度和锚点值的试验，直到找到最合适的试验。
当您成功完成此类动画时，请尝试执行反向动画。然后创建一个自定义UIButton，其中嵌入了这两个动画。祝贺你！你有一个汉堡包按钮，有很酷的动画，可以在任何地方重复使用！

在iOS中为3个箭头设置动画，用于uibutton

2 个答案: