如何在iOS 7 iPad App Store中同時翻轉並放大UIView？

Question

iPad iOS 7應用程序商店有一個非常酷的動畫，當你點擊一個應用程序圖標（當圖標較小而不是搜索結果時，從特色列表中）。這裏是它在行動一個圖：

基本上，圖標翻轉並在同一時間在尺寸膨脹。

有它後面的梯度和內容視圖較小。

到目前爲止，我有一個自定義的VC轉換設置，我有放大部分工作正常，但我不能翻轉jive。我如何模仿App Store動畫？

這裏是我的代碼至今：

- (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]; 
    } 
}]; 
} 

Answer 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 
}]; 

Answer 2

試試這個代碼

[UIView transitionFromView:'yourOriginView' 
         toView:'yourDestination' 
         duration:0.65f 
         options:UIViewAnimationOptionTransitionFlipFromLeft/ 
        completion:^(BOOL finished){ 
// Do your presentation here 
        }]; 

Answer 3

我把動畫的視頻在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; 
           }]; 
}