如何在iOS 7 iPad App Store中同时翻转和放大UIView？

iPad的iOS 7应用程序商店有一个非常酷的animation，当你点击一个应用程序图标（从图标较小，而不是search结果的特色列表）。 这是一个在实践中的图片：

基本上，图标同时翻转和扩大。

它后面有一个渐变，内容视图更小。

到目前为止，我有一个自定义的VC转换设置，我的扩大部分工作正常，但我不能翻转jive。 我该如何模仿App Storeanimation？

这是我到目前为止的代码：

- (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

我在iPad App Store应用程序中拍摄了animation的video，看起来不像UIView过渡。 如果你慢慢地回放，看起来像两个animation是同时发生的：1）图标旋转到大约90度，缩放和翻译2）细节渐渐消失，旋转一点点，缩放，并翻译成最终目的地。 所以细节没有继续下去的地方。

我认为这就是为什么它使用视图animation尝试这样做看起来很奇怪。

要在更连续的视图之间完成翻转，请参阅下面的代码。 它基本上是这样做的几个步骤：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; }]; } 

Answer 3

试试这个代码

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