UIVIew Flip Vertical Animation

Question

Given:

[UIView beginAnimations:nil context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut]; 
[UIView setAnimationDuration:.5];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:card cache:NO];
 myPic = [UIImage UIImagenamed: @"mySecondImage.png"];
[UIView commitAnimations];[/CODE]

Which animates 'myPic' right to left with a flip.

I need to get the same animation, but vertically. Flip from Top or Flip from Bottom. I looked around, no one really had a working model suggested.

I tried this, yet, no luck:

float duration = .5;
CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
animation.fromValue = [NSNumber numberWithDouble:0.0f * M_PI];
animation.toValue = [NSNumber numberWithDouble:1.0f * M_PI];
animation.duration = duration;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeBoth;
animation.repeatCount =1;;
animation.beginTime = CACurrentMediaTime();
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
card.layer.anchorPoint = CGPointMake(0.5, 1.0);
[card.layer addAnimation:animation forKey:@"rotationX"];[/CODE]

Any input? Thanks in advance.

You should edit this question to use the "code" layout for your code so that it's actually readable. — PengOne, Feb 28 '11 at 16:12
For that .5 seconds, you see the image move up, then all the sudden its inverted upside down. — Gizmodo, Mar 01 '11 at 01:09
http://stackoverflow.com/questions/5392629/uiview-vertical-flip-animation check this for vertical transition — Kostiantyn Sokolinskyi, Sep 09 '11 at 15:34

score 7 · Answer 1 · answered Sep 18 '11 at 17:12

I've also needed flip from bottom animation. I've compiled couple solutions and this works for me

- (CATransform3D) makeRotationAndPerspectiveTransform:(CGFloat) angle {
    CATransform3D transform = CATransform3DMakeRotation(angle, 1.0f, 0.0f, 0.0f);
    transform.m34 = 1.0 / -500;
    return transform;
}

- (void) flipFromBottom {

    //setup firstView to be visible
    view1.layer.transform =  CATransform3DMakeRotation(0, 1.0f, 0.0f, 0.0f);
    view1.hidden = NO;

    // setup secondView to be partialy rotated and invisible
    view2.layer.transform = [self makeRotationAndPerspectiveTransform:M_PI/2];
    view2.hidden = YES;

    // making sure that both views have the same position
    view2.frame = view1.frame;

    CFTimeInterval duration =  2.0;

    [UIView animateWithDuration:duration/2 
                          delay:0
                        options:UIViewAnimationCurveEaseIn
                     animations:^{
                         view1.layer.transform = [self makeRotationAndPerspectiveTransform:-M_PI / 2];
                     } 
                     completion:^(BOOL finished){
                         view1.hidden = YES;
                         view2.hidden = NO;
                         [UIView animateWithDuration:duration /2 
                                               delay:0
                                             options:UIViewAnimationCurveEaseOut
                                          animations:^{
                             view2.layer.transform =  CATransform3DMakeRotation(0.0f, 1.0f, 0.0f, 0.0f);
                                          }
                                          completion:NULL];
                     }];
}

This almost works for me. But the top half of the starting UIView and the new UIView coming into view, is completely invisible when the animation starts. Is there an anchor point value I need to set on these views so their top halves don't get clipped? — idStar, Apr 12 '12 at 21:16

UIVIew Flip Vertical Animation

1 Answers1

Linked