iPhone SDK：使用块在视图控制器之间进行翻转和缩放动画？

Question

我试图在两个视图控制器之间创建一个翻转和缩放的动画。使用iOS 4.0中提供的动画块似乎是可行的，但我仍然不确定如何实现它。我在这个SO问题中找到了一个翻转动画。

使用此代码，两个视图之间的翻转效果很好，但缩放效果不起作用 - 翻转动画完成后，新视图会跳到正确的大小。我应该如何同时翻转视图并进行缩放？

UIView *tempContainer = myView.contentView ;
[UIView transitionWithView:tempContainer
                  duration:2
                   options:UIViewAnimationOptionTransitionFlipFromRight
                animations:^{ 
                    [[[tempContainer subviews] objectAtIndex:0] removeFromSuperview]; 
                    [tempContainer addSubview:myOtherViewController.view];
                    CGAffineTransform transform = CGAffineTransformMakeScale(4.0, 4.0);
                    tempContainer.transform = transform;
                } 
                completion:^(BOOL finished){
                    [tempContainer release]; 
                }];

- memmons

---

我相信这个链接会有所帮助。 - geekay

Answer 1

这是我如何在两个不同大小的视图之间翻转和缩放的方法。我将动画分成几个部分。首先，我将背景视图放置在与前景视图相同的位置，但将其隐藏。然后我将前景视图翻转并缩放一半。背景视图被赋予与前景视图相同的变换，然后旋转并缩放剩余部分。回翻基本上是相反的过程。

我想你可以使用不同的视图控制器视图属性作为背景视图，但我还没有尝试过。

// 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 destination:(CGRect)destRect
{
    float duration = 0.5;

    // distance from center of screen from frontView
    float dx = destRect.origin.x + CGRectGetWidth(destRect) / 2 - frontView.center.x;
    float dy = destRect.origin.y + CGRectGetHeight(destRect) / 2 - frontView.center.y;
    float scale = CGRectGetWidth(destRect) / CGRectGetWidth(frontView.bounds);

    // 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, scale/2, scale/2, 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 = destRect;
                                                                }];
                              } 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 = backView.center.x - frontView.center.x;
    float dy = backView.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;
                              }];
}

- Former Gaucho

Answer 2

我想这是因为选项UIViewAnimationOptionTransitionFlipFromRight在某种程度上覆盖了其他所有内容。尝试使用嵌套动画或链接它们在一起

- adubr