Блог

Я думаю, что это очень простой вопрос, но я борюсь с этим.

У меня есть скриншот (UIImage), который я помещаю в UIView (в моем примере ниже он называется screenShotView). Я хочу избавиться от этого screenShotView, постепенно раскрывая, что находится за этим screenShotView. Прямо сейчас мой screenShotView СЖИМАЕТСЯ влево, но я бы хотел, чтобы его РАМКА становилась все меньше и меньше, пока screenShotView больше не будет виден (без сжатия).

Это мой код. Если бы я выполнил то же преобразование с помощью UITextView (вместо UIImage), оно работало бы именно так, как я хотел бы, чтобы оно вело себя (без преобразования).

Возможно, я не понимаю концепцию кадрирования пользовательских изображений?

  [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:10];

    [screenShotView setFrame:CGRectMake(0, 0, 0, 480)];

[UIView commitAnimations];
  

И вот как это выглядит в середине анимации:

И вот как я хотел бы, чтобы это выглядело в середине анимации:

Это код, обновленный в соответствии с предложениями Codo (см. Ниже), в результате чего у меня больше нет анимации. Синий экран просто появляется при нажатии кнопки. Я предполагаю, что я делаю что-то не так с добавлением вложенных представлений — проблема, похоже, в том, что никакие вложенные представления не добавляются и поэтому не могут исчезнуть:

     -(IBAction)showNextText
{


    screenShotView = [[UIImageView alloc] initWithImage:[self screenshot]];

    [screenShotView setFrame:CGRectMake(0, 0, 320, 480)];
    [screenShotScrollView setFrame:CGRectMake(0, 0, 320, 480)];

    [self.view addSubview:screenShotScrollView];
    [screenShotScrollView addSubview:screenShotView];
    screenShotScrollView.scrollEnabled = NO;


    [self setUpNextText];
    [self removeOldText];

}

-(void)setUpNextText
{
    NSString* secondText = @"This is the second text shown if the user clicks next.";
    textView.text = secondText;
    textView.textColor = [UIColor redColor];
    textView.backgroundColor = [UIColor blueColor];
}

-(IBAction)removeOldText{
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:5];

    [screenShotScrollView setFrame:CGRectMake(0,0,320,480)];

    [UIView commitAnimations];

}
  

Ответ на вопрос

На самом деле это очень просто: я создал пример приложения для запуска перехода star wars (просто называю его здесь). Для простоты я буду просто называть два вида FirstView и secondView. Показан FirstView (будет вашим скриншотом), а secondView будет скользить слева. Я поместил кнопку на каждый вид, чтобы анимировать переход, который является wirde к doTransition . Важной частью является установка скольжения в свойствах view clipsToBounds = YES и autoresizesSubviews = NO . Вот и все. Я опубликую несколько скриншотов.

 - (void)viewDidLoad 
{
    [super viewDidLoad];
    secondView.frame = CGRectMake(0, 0, 0, 480);
    secondView.clipsToBounds = YES;
    secondView.autoresizesSubviews = NO;

    [self.view addSubview:firstView];   
    [self.view addSubview:secondView];  
}

- (IBAction)doTransition
{
    [UIView animateWithDuration:1.0 
                     animations:^{
                         self.secondView.frame = CGRectMake(0, 
                                                            0, 
                                                            320, 
                                                            480);
                     }];
}
  

Исследование по page curl

Я провел некоторое исследование по эффекту поворота страницы / curl. В основном все это присутствует в iOS, без особых усилий вы можете создать эффект перелистывания страницы iBook, но для этого требуется доступ к частным методам и классам. Я по-прежнему призываю всех взглянуть на это, потому что это может когда-нибудь быть открыто.

• Приложение Apple iBooks Dynamic Page Curl — Демонстрационное приложение Стивена Троутона-Смита

• Leaves — Приложение с пользовательским скручиванием страницы от Тома Броу, опробовано, скомпилировано и выглядит красиво!

• App Store -безопасные анимации скручивания страниц — Статья о приложении Tom Brow Leaves, которое было разветвлено (две страницы) автором Ole Begemann

• Реализация скручивания страницы iBooks с использованием алгоритма конической деформации — С демонстрационным приложением macOS, очень профессиональным и продвинутым, хотя и не подходящим для быстрого снимка, но все же вдохновляющим. Скачайте приложение!

• Анатомия скручивания страницы — математический подход

Я предполагаю, что вам нужно поместить свой вид сверху в UIScrollView. Затем вы устанавливаете размер содержимого таким же, как размер UIScrollView, и отключаете прокрутку.

Затем вы создаете свою оригинальную анимацию (setFrame) в UIScrollView.

По сути, затем вы используете UIScrollView для введения отдельной системы координат для внутреннего вида. Когда внешний вид (вид прокрутки) становится меньше, это не искажает внутренний вид, а обрезает его.

 CGRect fillRect = self.view.bounds;

leftImageView.clipsToBounds = YES;
leftImageView.contentMode = UIViewContentModeTopLeft;
leftImageView.frame = fillRect;

rightImageView.clipsToBounds = YES;
rightImageView.contentMode = UIViewContentModeTopRight;
rightImageView.frame = CGRectMake(fillRect.size.width, 0, 0, fillRect.size.height);

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:3];

leftImageView.frame = CGRectMake(0, 0, 0, fillRect.size.height);
rightImageView.frame = fillRect;

[UIView commitAnimations];
  

Анимируйте не frame , а center . Смотрите документацию здесь.

Кроме того, если вам нужна совместимость только с iOS 4, используйте -animateWithDuration:animations:

 [UIView animateWithDuration:10
                 animations:^{ screenShotView.center = CGPointMake(x, y) } ];
  

Я не уверен, что полностью понимаю, как вы хотите, чтобы ваш вид исчез.

Если предполагается, что он будет становиться все более и более прозрачным, используйте следующий код (вместо setFrame):

 [screenShotView setAlpha: 0.0f];
  

Если предполагается, что он будет становиться все меньше и меньше (но сохранит свой центр), то попробуйте:

 [screenShotView setFrame:CGRectMake(screenShotView.frame.x, screenShotView.frame,y, 0, 0)];