Search code examples
iosiphonecore-animationflipcabasicanimation

Animation like cards app iphone


I am trying to achieve the same effect like in cards app (http://www.youtube.com/watch?v=aWjX_qufmc0) for opening the content inside (Horizontal greeting card opening type animation: https://store.marathonpress.com/image/cache/data/store_381/Previews/Press-Printed-Card-Folded-5x7-H-C-500x500.jpg). I have tried it using CABasicAnimation but no access, Can someone help me to achieve the same animation effect.

I am trying like this:

- (void)loadInsideMessageView {

    [UIView transitionWithView:backgroundView
                      duration:1.0
                       options:UIViewAnimationOptionTransitionFlipFromBottom //any animation
                    animations:^ {
                        insideView.frame = CGRectMake(0, 40, 568, 280);
                        [backgroundView addSubview:insideView];
                    }
                    completion:nil];
}

Thanks.


Solution

  • For create necessary animation you can use Core Animation Function.

    Create new Single View Application project and insert the code below in ViewController.m for see how it works.

    - (void)viewDidLoad {
      [super viewDidLoad];
      [[self view] setBackgroundColor:[UIColor grayColor]];
    
      //create frame for 2 test views
      CGRect frame = CGRectMake(50.0, 100.0 , 200.0 ,100.0);
    
      //lower view
      UIView *insideViev = [[UIView alloc] initWithFrame: frame];
      [insideViev setBackgroundColor:[UIColor redColor]];
    
      //upper view
      UIView *pageView = [[UIView alloc] initWithFrame:frame];
      [pageView setBackgroundColor:[UIColor greenColor]];
    
      [[self view] addSubview:insideViev];
      [[self view] addSubview:pageView];
    
      //get layer of upper view and set needed property
      CALayer *viewLayer = [pageView layer];
      [viewLayer setAnchorPoint:(CGPoint){0.5 , 0.0}];
      [viewLayer setFrame:frame];
    
      //create perspective
      CATransform3D mt = CATransform3DIdentity;
      mt.m34 = 1.0/-500.;
    
      //create rotation
      CATransform3D open = CATransform3DMakeRotation(3 * M_PI_4, 1, 0, 0);
    
      //create result transform
      CATransform3D openTransform = CATransform3DConcat(open, mt);
    
      [UIView animateWithDuration:3.0 animations:^
       {
     //close animation
     [viewLayer setTransform:openTransform];
       } completion:^(BOOL finished)
       {
         [UIView animateWithDuration:3.0 animations:^
          {
            //close animation
            [viewLayer setTransform:CATransform3DIdentity];
          }];
       }];
    }