Animation like cards app iphone

1.3k views Asked by At

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.

1

There are 1 answers

9
Ruslan Soldatenko On BEST ANSWER

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