Анимируйте 3 строки в стрелку в iOS для uibutton

Кто-нибудь знает, как анимировать 3 параллельные линии со стрелкой вправо, как это происходит в строке меню навигации, чтобы открыть боковое меню, применив CGAfflineRotation к 3 представлениям.

Мне действительно нужна помощь в этом, чтобы, по крайней мере, я мог получить представление о том, как начать это.

Вот как это будет выглядеть, когда кто-то пытался это нарисовать:

_______                  
_______                        \
_______         to   ___________\
                                /
                               /

Любая идея или предложение будет полезно.


ios iphone objective-c uibutton cgaffinetransform
person Vizllx    schedule 30.06.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Как вы сказали, вы должны использовать 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) {}];
}
person Nat    schedule 30.06.2015
comment
Спасибо, Виве. Я тоже попробую ваш подход. - person Vizllx; 30.06.2015

arrow_upward
1
arrow_downward

Такую анимацию проще делать с CALayer Animation вместо UIView Animation. Вам нужно добавить три подслоя: верхняя_линия, средняя_линия и нижняя_линия. Затем нарисуйте линию на каждом слое и правильном положении (Подсказка: используйте CAShapeLayer для рисования линий). Наконец, просто поверните слои top_line и bottom_line под нужным углом, вам, вероятно, также потребуется изменить точку привязки и положение слоя. Это довольно сложно на последнем шаге, возможно, просто сделайте несколько проб с разными значениями угла и точки привязки, пока не найдете наиболее подходящие.
Когда вы успешно сделали такую ​​анимацию, попробуйте сделать обратную анимацию. Затем создайте Custom UIButton с этими двумя встроенными анимациями. Поздравляем! У вас есть кнопка-гамбургер с классной анимацией, которую можно использовать где угодно!

person Eric Qian    schedule 30.06.2015