flip greeting card like just wink app

Question

Can anyone help me in making animation like we have in Just Wink App.I want to have the same preview animation as in Just Wink. here is the animation which i want to have

I have tried a lot for hours but didn't find anything useful.I tried the similar animation using CATransform3D but not able to get the exact one with this also .Here is the code that i have tried

intialTransform = CATransform3DIdentity;
intialTransform.m34 = 1.0 / -500;
intialTransform = CATransform3DRotate(intialTransform, DEGREES_TO_RADIANS(70), 1.0f, 0.0f, 0.0f);
_myView1.layer.transform = intialTransform;

i take three view as above like _myView2 and_myview3 and have CATransform3DIdentity for everyone.I am able to rotate the different view like in Just Wink but not able to gain the exact animation. Tried a lot for samples but that also didm;t solve my problem. Please help!!!!

Answer 1

Use this code sample for review "open card" animation in implementation which work for me. Just insert the code in the new "single view" project and run.

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@property (strong, nonatomic) UIView *insideView;
@property (strong, nonatomic) UIView *pageView;
@property (strong, nonatomic) UIView *backPageView;
@property (assign, nonatomic) CGRect cardFrame;

@end

@implementation ViewController

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
  UITouch *touch = [touches anyObject];
  if ([touch locationInView:[self view]].x <= CGRectGetMaxX(_cardFrame)) {

    float dx = ([touch locationInView:[self view]].x - CGRectGetMaxX(_cardFrame)) / _cardFrame.size.width;

    //create perspective
    CATransform3D mt = CATransform3DIdentity;
    mt.m34 = 1.0/-500.;

    //create rotation
    CATransform3D open = CATransform3DMakeRotation( -dx * M_PI_2, 0, - 1, 0);

    //create result transform
    CATransform3D openTransform = CATransform3DConcat(open, mt);

    //apply transforms
    [[_pageView layer] setTransform:openTransform];
    [[_backPageView layer] setTransform:openTransform];
  }
}

- (void)viewDidLoad
{
  [super viewDidLoad];
  [[self view] setBackgroundColor:[UIColor grayColor]];

  //create frame for 2 test views
  CGFloat size = 200.0;
  _cardFrame = CGRectMake([[self view] center].x - size / 2, [[self view] center].y - size / 2 , size, size);

  //lower view
  _insideView = [[UIView alloc] initWithFrame: _cardFrame];
  [_insideView setBackgroundColor:[UIColor redColor]];

  //upper view
  _pageView = [[UIView alloc] initWithFrame:_cardFrame];
  [_pageView setBackgroundColor:[UIColor greenColor]];

  //upper view back side
  _backPageView = [[UIView alloc] initWithFrame:_cardFrame];
  [_backPageView setBackgroundColor:[UIColor blueColor]];

  [[self view] addSubview:_insideView];
  [[self view] addSubview:_pageView];
  [[self view] insertSubview:_backPageView belowSubview:_pageView];

  //get layer of upper view and set needed property
  CALayer *viewLayer = [_pageView layer];
  CALayer *viewBackLayer = [_backPageView layer];

  [viewLayer setAnchorPoint:(CGPoint){0.0 , 0.5}];
  [viewLayer setFrame:_cardFrame];
  [viewLayer setDoubleSided:NO];
  [viewBackLayer setAnchorPoint:(CGPoint){0.0 , 0.5}];
  [viewBackLayer setFrame:_cardFrame];

  //create perspective
  CATransform3D mt = CATransform3DIdentity;
  mt.m34 = 1.0/-500.;

  //create rotation
  CATransform3D open = CATransform3DMakeRotation(3 * M_PI_4, 0, - 1, 0);

  //create result transform
  CATransform3D openTransform = CATransform3DConcat(open, mt);

  [UIView animateWithDuration:1.0 animations:^
   {
     //close animation
     [viewLayer setTransform:openTransform];
     [viewBackLayer setTransform:openTransform];
   } completion:^(BOOL finished)
   {
     [UIView animateWithDuration:1.0 animations:^
      {
        //close animation
        [viewLayer setTransform:CATransform3DIdentity];
        [viewBackLayer setTransform:CATransform3DIdentity];
      }];
   }];
}

@end