WedX - журнал о программировании и компьютерных науках

Как я могу перевернуть и увеличить UIView его одновременно, как в iOS 7 iPad App Store?

В iPad iOS 7 App Store есть довольно крутая анимация, когда вы нажимаете значок приложения (из избранного списка, когда значок меньше, а не результат поиска). Вот его изображение в действии:

введите описание изображения здесь

Обычно значок переворачивается и увеличивается в размере одновременно.

введите описание изображения здесь

За ним есть градиент, и представление содержимого меньше.

Пока у меня есть настраиваемая настройка перехода VC, и у меня есть часть увеличения, работающая нормально, но я не могу переключиться на джайв. Как я могу имитировать анимацию в магазине приложений?

Вот код, который у меня есть:

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
UIView *inView = [transitionContext containerView];
UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIView *fromView = [fromVC view];
UIView *toView = [toVC view];
toView.frame = [transitionContext finalFrameForViewController:toVC];

// Take a snapshot of the new view being presented
UIGraphicsBeginImageContextWithOptions(toView.bounds.size, NO, 0);
CGContextRef ctx = UIGraphicsGetCurrentContext();
[fromView.layer renderInContext:ctx];
UIImage *snapshot = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

// Add the snapshot view and animate its appearance
UIImageView *intermediateView = [[UIImageView alloc] initWithImage:snapshot];
[inView addSubview:intermediateView];
[self calculateSourceRectInView:inView];
intermediateView.frame = self.sourceRect;

[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
    intermediateView.layer.transform = CATransform3DMakeRotation(-1.0 * -M_PI_2, 0.0, 1.0, 0.0);
    intermediateView.frame = toView.frame;
} completion:^(BOOL finished) {
    [intermediateView removeFromSuperview];

    if ([transitionContext transitionWasCancelled]) {
        [transitionContext completeTransition:NO];
    } else {
        [inView addSubview:toView];
        [fromView removeFromSuperview];
        [transitionContext completeTransition:YES];

        // Now this is a pushed view, we allow interactive
        // transitioning back to the parent view.
        self.interactiveTransition = [EBInteractiveZoomTransition new];
        [self.interactiveTransition wireToViewController:toVC];
    }
}];
}

Ответы:


1

Попробуйте так ...

//set Intial Frame of view

[UIView transitionWithView: self.view
                  duration: 1.5f
                   options: UIViewAnimationOptionTransitionFlipFromRight
                animations: ^(void)
 {
 }
                completion: ^(BOOL isFinished)
 {
      // set the Final Frame of the View
 }];
04.10.2013

2

Я снял видео с анимацией в приложении iPad App Store, и это не похоже на переход UIView. Если вы воспроизводите его медленно, похоже, что две анимации происходят одновременно: 1) значок поворачивается примерно на 90 градусов, масштабируется и перемещается 2) детали исчезают, немного поворачиваются, масштабируются и преобразуются в конечный пункт. Таким образом, подробности не продолжаются там, где остановился значок.

Думаю, именно поэтому это выглядит странно, когда я пытаюсь сделать это с помощью анимации просмотра.

Чтобы выполнить более непрерывное переключение между представлениями, см. Приведенный ниже код. В основном это делается в несколько этапов: 1) Поместите backView туда, где frontView 2) Анимируйте вращение и масштабирование frontView наполовину 3) Установите преобразование backView таким же, как frontView 4) Показать backView 5) Анимируйте вращение backView и масштабирование остаток пути

Обратное движение - это в основном обратное. Работает отлично.

// flip and scale frontView to reveal backView to the center of the screen
// uses a containerView to mark the end of the animation
// parameterizing the destination is an exercise for the reader
- (void)flipFromFront:(UIView*)frontView toBack:(UIView*)backView
{
    float duration = 0.5;

    // distance from center of screen from frontView
    float dx = self.view.center.x - frontView.center.x;
    float dy = self.view.center.y - frontView.center.y;

    // this prevents any tearing
    backView.layer.zPosition = 200.0;

    // hide the backView and position where frontView is
    backView.hidden = NO;
    backView.alpha = 0.0;
    backView.frame = frontView.frame;

    // start the animation
    [UIView animateKeyframesWithDuration:duration
                                   delay:0.25
                                 options:UIViewKeyframeAnimationOptionCalculationModeCubic
                              animations:^{
                                  // part 1.  Rotate and scale frontView halfWay.
                                  [UIView addKeyframeWithRelativeStartTime:0.0
                                                          relativeDuration:0.5
                                                                animations:^{
                                                                    // get the transform for the blue layer
                                                                    CATransform3D xform = frontView.layer.transform;
                                                                    // translate half way
                                                                    xform = CATransform3DTranslate(xform, dx/2, dy/2, 0);
                                                                    // rotate half way
                                                                    xform = CATransform3DRotate(xform, M_PI_2, 0, 1, 0);
                                                                    // scale half way
                                                                    xform = CATransform3DScale(xform, 1.5, 1.5, 1);
                                                                    // apply the transform
                                                                    frontView.layer.transform = xform;
                                                                }];

                                  // part 2. set the backView transform to frontView so they are in the same
                                  // position.
                                  [UIView addKeyframeWithRelativeStartTime:0.5
                                                          relativeDuration:0.0
                                                                animations:^{
                                                                    backView.layer.transform = frontView.layer.transform;
                                                                    backView.alpha = 1.0;
                                                                }];

                                  // part 3.  rotate and scale backView into center of container
                                  [UIView addKeyframeWithRelativeStartTime:0.5
                                                          relativeDuration:0.5
                                                                animations:^{
                                                                    // undo previous transforms with animation
                                                                    backView.layer.transform = CATransform3DIdentity;
                                                                    // animate backView into new location
                                                                    backView.frame = self.containerView.frame;
                                                                }];
                              } completion:^(BOOL finished) {
                                  self.displayingFront = !self.displayingFront;
                              }];
}

// flip from back to front
- (void) flipFromBack:(UIView*)backView toFront:(UIView*)frontView
{
    float duration = 0.5;

    // get distance from center of screen to destination
    float dx = self.view.center.x - frontView.center.x;
    float dy = self.view.center.y - frontView.center.y;

    backView.layer.zPosition = 200.0;
    frontView.hidden = YES;

    // this is basically the reverse of the previous animation
    [UIView animateKeyframesWithDuration:duration
                                   delay:0
                                 options:UIViewKeyframeAnimationOptionCalculationModeCubic
                              animations:^{
                                  [UIView addKeyframeWithRelativeStartTime:0.0
                                                          relativeDuration:0.5
                                                                animations:^{
                                                                    CATransform3D xform = backView.layer.transform;
                                                                    xform = CATransform3DTranslate(xform, -dx/2, -dy/2, 0);
                                                                    xform = CATransform3DRotate(xform, M_PI_2, 0, 1, 0);
                                                                    xform = CATransform3DScale(xform, 0.75, 0.75, 1);
                                                                    backView.layer.transform = xform;
                                                                }];

                                  [UIView addKeyframeWithRelativeStartTime:0.5
                                                          relativeDuration:0.0
                                                                animations:^{
                                                                    backView.alpha = 0.0;
                                                                    frontView.hidden = NO;
                                                                }];

                                  [UIView addKeyframeWithRelativeStartTime:0.5
                                                          relativeDuration:0.5
                                                                animations:^{
                                                                    self.hiddenView.alpha = 0.0;
                                                                    frontView.layer.transform = CATransform3DIdentity;
                                                                }];
                              } completion:^(BOOL finished) {
                                  self.displayingFront = !self.displayingFront;
                              }];
}
26.02.2014

3

Попробуйте этот код

 [UIView transitionFromView:'yourOriginView'
                        toView:'yourDestination'
                      duration:0.65f
                       options:UIViewAnimationOptionTransitionFlipFromLeft/
                    completion:^(BOOL finished){
//    Do your presentation here
                    }];
04.10.2013
Новые материалы

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

ИИ в аэрокосмической отрасли
Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


Для любых предложений по сайту: [email protected]